精华内容
下载资源
问答
  • async-validator 是一个异步验证的库,需要传入要验证的数据和验证规则 ,下面通过本文给大家介绍Async Validator 异步验证使用说明,需要的的朋友参考下吧
  • jquery ajax 异步验证

    2011-10-28 16:01:02
    jquery ajax 异步验证jquery ajax 异步验证
  • 有个需求就是异步验证用户名是否存在。用的技术是jQuery异步验证和struts2,大家可以参考下
  • 主要介绍了jquery登录的异步验证操作,涉及jQuery针对表单提交登录的用户名、密码验证与异步post提交相关操作技巧,需要的朋友可以参考下
  • 主要给大家介绍了关于angular异步验证防抖踩坑的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • AJAX异步验证

    2013-03-09 23:00:15
    AJAX实现异步验证 我们在做验证码的时候往往由于要反,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果...
  • 用户名异步验证

    2013-11-01 10:26:08
    ajax技术做用户名的异步验证,内含jdbc连接数据库.
  • 异步验证大文件的MD5值 ,支持所有哈希算法,异步读取,分块计算哈希值
  • ajax异步验证用户名

    2017-11-18 09:04:03
    ajax异步验证代码注册时验证注册的用户名(邮箱等)是否存在; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or

    ajax异步验证代码

    注册时验证注册的用户名(邮箱等)是否存在

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script>
    <title>Insert title here</title>
        <script type="text/javascript">
            window.onload=function(){
                var nameElement = document.getElementsByName("userName")[0];
                nameElement.onblur = function(){
                    var name = this.value;//this等价于nameElement
                    //创建XMLHttpRequest对象
                var xhr = getXMLHttpRequest();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4){//请求一切正常
                        if(xhr.status==200){//服务器响应一切正常
                            //alert(xhr.responseText);//得到响应结果
                            var msg = document.getElementById("msg");
                            if(xhr.responseText=="true"){
                                msg.innerHTML =  "<font color='red'>用户名已存在</font>";
                                //msg.innerText = "<font color='red'>用户名已存在</font>";
                            }else{
                                msg.innerHTML = "可以使用";
                            }
                        }
                    }
                }
    
                //创建连接
                xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
                //发送请求
                xhr.send(null);
                }
    
            }
        </script>
    </head>
    <body>
            用户名:<input type="text" name="userName" /><span id="msg"></span><br/>
            密码<input type="password" name="pwd"/><br/>
    </body>
    </html>

    Servlet中处理提交表单

    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class CkNameServlet extends HttpServlet {
    
        private static final long serialVersionUID = 1L;
    
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            PrintWriter out = response.getWriter();
            String name = request.getParameter("name");
            //模拟数据库
            if("tom".equals(name)){
                //如果用户名为tom则返回true
                out.print(true);
            }else{
                out.print(false);
            }
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            doGet(request, response);
        }
    
    }
    
    展开全文
  • 主要介绍了thinkphp5使用bootstrapvalidator进行异步验证邮箱的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了利用jQuery.Validate异步验证用户名是否存在的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • Ajax的完整案例展示,含用户名异步验证,Javabean也很完整,数据库用的oracle,可以根据自己情况替换响应的jar包即可
  • ajax异步验证用户名是否存在

    热门讨论 2014-08-07 22:43:51
    ajax异步验证用户名是否存在,非常小巧的实例,需要安装oracle数据,建立一个用户表,实例中有用户表的实体,可以仿照写一个数据库。
  • AJAX 异步验证注册的用户名 AJAX做注册验证 讲师讲课的代码
  • React-Redux 异步验证

    2018-02-06 13:36:05
    下面是简单的一个验证页面,我们需要做的就是在选择一个类目...注意:不要害怕,异步验证会不会验证没结束,直接点了保存就提交了。答案是肯定不会的, 所有的保存或点击进入下一个页面,都会先进行异步验证异步验证
    下面是简单的一个验证页面,我们需要做的就是在选择一个类目后,去判断数据库中该类目下是否有相同的值。同步验证
    validate .js里面可以验证基本的是否为空,字符长短,正则等,异步
    asyncValidate.js用于跑后端去从数据库进行验证(
    注意:不要害怕,异步验证会不会验证没结束,直接点了保存就提交了。答案是肯定不会的,
    所有的保存或点击进入下一个页面,都会先进行异步验证,异步验证没结束,不会进行下一步的操作)
     
    
    import restClientRemote from '../../../../../restClientRemote';
    restClientRemote是封装的fetch的文件,按自己的项目需求去做。主要的就是:
    const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

    let WizardFormFirstPage = props => {
        const {handleSubmit,thircate} = props
        return (
            <form onSubmit={handleSubmit}>
                <div style={{marginLeft: "2%", marginBottom: "2%"}}>
                    <FormTab label="resources.goods.tabs.baseInfo">
                        <Field
                            name="thircate"
                            component={Category}
                            style={{display: 'inline-block', width: '90%'}}
                        />
                        }
                        {thircate &&
                        <TextInput
                            source="goodstype"
                            label="商品型号"
                            style={{display: 'inline-block', width: '90%'}}/>
                        }
                    </FormTab >
                </div>
                <div className="btnbox">
                    <div className="btnitem">
                        <div className="btnposition">
                            <button type="submit" className="btncontent">
                                <div>
                                    <div className="btncontentbox">
                                        <span className="btncontentboxspan">下一步</span>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        )
    }
    
    
    
    WizardFormFirstPage = reduxForm({
        form: 'wizard',
        destroyOnUnmount: false, // <------ preserve form data
        forceUnregisterOnUnmount: true,
        validate,
        asyncValidate,
        asyncBlurFields: ['goodstype', 'thircate'],
    })(WizardFormFirstPage)
    
    
    const selector = formValueSelector('wizard')
    WizardFormFirstPage = connect(state => {
        const {thircate} = selector(state, "thircate")
        return {
            thircate,
        }
    })(WizardFormFirstPage)
    
    export default WizardFormFirstPage
    其中同步验证代码:
    const validate = values => {
        const errors = {}
        if (!values.thircate) {
            errors.thircate = '必填'
        }
        if (!values.goodstype) {
            errors.goodstype = '必填'
        } else {
            if (values.goodstype.length > 20) {
                errors.goodstype = '输入过长!'
            }
        }
        return errors;
    }
    
    export default validate
    

    验证异步的代码:
    import {GET_MANY} from 'admin-on-rest';
    import restClientRemote from '../../../../../restClientRemote';
    
    function asyncValidate(values) {
        let type = values.goodstype;
        let thircate = values.thircate;
        return restClientRemote(GET_MANY, 'goods/JudgeType', {
            filter: {
                goodstype: type,
                thircate: thircate
            },
            sort: {},
        }).then(response => {
            if (response.data !== undefined) {
                var flag = response.data[0]["flag"];
                if (flag) {
                    throw {goodstype: '同类目下型号重复!'}
                }
            }
        });
    
    }
    
    export default asyncValidate

    展开全文
  • angular8响应式表单,表单验证,异步验证 响应式表单 Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单和模板驱动表单。 响应式表单和模板驱动表单共享了一些底层构造块。 FormControl 实例用于追踪...

    angular8响应式表单,表单验证,异步验证

    响应式表单

    Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单模板驱动表单
    响应式表单和模板驱动表单共享了一些底层构造块。

    • FormControl 实例用于追踪单个表单控件的值和验证状态。
    • FormGroup 用于追踪一个表单控件组的值和状态。
    • FormArray 用于追踪表单控件数组的值和状态。

    要使用响应式表单,首先要把 ReactiveFormsModule 添加到你的 NgModule 的 imports 数组中。
    然后就可以在组件中使用FormControl ,FormGroup,FormArray 创建表单了。
    手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。
    FormBuilder 服务有三个方法:control()、group() 和 array()。这些方法都是工厂方法,用于在组件类中分别生成 FormControl、FormGroup 和 FormArray。

    表单验证

    • 内置验证器
      Validators类中定义了11个内置验证器
    验证器方法使用说明
    min()此验证器要求控件的值大于或等于指定的数字。 它只有函数形式,没有指令形式。
    max()此验证器要求控件的值小于等于指定的数字。 它只有函数形式,没有指令形式。
    required()此验证器要求控件具有非空值。
    requiredTrue()此验证器要求控件的值为真。它通常用来验证检查框。
    email()此验证器要求控件的值能通过 email 格式验证。
    minLength()此验证器要求控件值的长度大于等于所指定的最小长度。当使用 HTML5 的 minlength 属性时,此验证器也会生效。
    maxLength()此验证器要求控件值的长度小于等于所指定的最大长度。当使用 HTML5 的 maxlength 属性时,此验证器也会生效。
    pattern()此验证器要求控件的值匹配某个正则表达式。当使用 HTML5 的 pattern 属性时,它也会生效。
    nullValidator()此验证器什么也不做。
    compose()把多个验证器合并成一个函数,它会返回指定控件的各个错误映射表的并集。
    composeAsync()把多个异步验证器合并成一个函数,它会返回指定控件的各个错误映射表的并集。
    • 自定义验证器
      regularExpressionValidator(regular: RegExp): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } | null => {
          const forbidden = !control.value || regular.test(control.value);
          return forbidden ? null : { forbiddenName: { value: control.value } };
        };
      }
    
    • 自定义异步验证器
      asyncValidator() {
        return (ctrl: AbstractControl): Promise<ValidationErrors | null>| Observable<ValidationErrors | null> => {
          return new Promise(resolve => {
            const accountList = ['qaz', 'wsx', 'edc'];
            setTimeout(() => {
              if (accountList.includes(ctrl.value)) {
                resolve({ msg: `${ctrl.value}已经被占用` });
              } else {
                resolve(null);
              }
            }, 2000);
          });
        };
      }
    

    自定义验证器都返回一个AbstractControl实例作为参数的函数,其中同步验证器返回{}或null分别表示验证不通过和通过;异步验证器返回Promise或Obzervable对象,回调中的值为null时表示验证通过。

    示例

    • ReactiveComponent
    import { Component, OnInit } from '@angular/core';
    import {
      FormGroup,
      FormControl,
      FormBuilder,
      Validators,
      ValidatorFn,
      AbstractControl,
      ValidationErrors
    } from '@angular/forms';
    import { Observable } from 'rxjs';
    @Component({
      selector: 'app-reactive',
      templateUrl: './reactive.component.html',
      styleUrls: ['./reactive.component.sass']
    })
    export class ReactiveComponent implements OnInit {
      constructor(private fb: FormBuilder) {
        console.log(111, this.profileForm);
      }
      // 获取控件AbstractControl对象
      get firstName() {
        return this.userForm.get('firstName');
      }
      get lastName() {
        return this.userForm.get('lastName');
      }
      get account() {
        return this.userForm.get('account');
      }
      // FormGroup生成控件组,FormControl生成控件对象
      profileForm = new FormGroup({
        firstName: new FormControl(''),
        lastName: new FormControl('')
      });
      // 使用FormBuilder创建表单数据
      // 有三个方法:control()、group() 和 array()。这些方法都是工厂方法,用于在组件类中分别生成 FormControl、FormGroup 和 FormArray
      userForm = this.fb.group({
        firstName: ['', Validators.required],
        lastName: ['', this.regularExpressionValidator(/^1[3456789]\d{9}$/)],
        account: [
          '',
          {
            validators: Validators.required,
            asyncValidators: this.asyncValidator(),
            updateOn: 'blur'
          }
          // this.asyncValidator()
        ]
      });
      // 异步验证器
      asyncValidator() {
        return (
          ctrl: AbstractControl
        ):
          | Promise<ValidationErrors | null>
          | Observable<ValidationErrors | null> => {
          return new Promise(resolve => {
            const accountList = ['qaz', 'wsx', 'edc'];
            setTimeout(() => {
              if (accountList.includes(ctrl.value)) {
                resolve({ msg: `${ctrl.value}已经被占用` });
              } else {
                resolve(null);
              }
            }, 2000);
          });
        };
      }
      // 验证器
      regularExpressionValidator(regular: RegExp): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } | null => {
          const forbidden = !control.value || regular.test(control.value);
          return forbidden ? null : { forbiddenName: { value: control.value } };
        };
      }
    
      ngOnInit() {}
      setFormData() {
        // this.profileForm.firstName.setValue('Nancy');
        console.log(this.profileForm);
        // 参数必须和form对象一致
        this.profileForm.setValue({ firstName: 'firstName', lastName: 'lastName' });
      }
      patchValue() {
        // 部分模型更新
        this.profileForm.patchValue({ firstName: 'firstName1' });
      }
      consoleForm() {
        console.log(this.userForm);
      }
    }
    
    
    • html代码
    <div class="container">
      <h1>Reactive Form</h1>
      <form [formGroup]="profileForm">
        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>
    
        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
      </form>
    
      <p>
        <button (click)="setFormData()">设置表单数据setValue</button>
      </p>
      <p>
        <button (click)="patchValue()">设置表单数据patchValue</button>
      </p>
      <p>userForm!</p>
      <form [formGroup]="userForm">
        <div class="cross-validation" [class.cross-validation-error]="
            userForm.errors?.identityRevealed &&
            (userForm.touched || userForm.dirty)
          ">
          <div class="form-group">
            <label> First Name:</label>
            <input class="form-control" type="text" formControlName="firstName" required>
            <div class="alert alert-danger" *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)">
    
              <div *ngIf="firstName.errors.required">
                Name is required.
              </div>
              <!-- <div *ngIf="name.errors.minlength">
                  Name must be at least 4 characters long.
                </div> -->
              <!-- <div *ngIf="name.errors.forbiddenName">
                  Name cannot be Bob.
                </div> -->
            </div>
          </div>
          <div class="form-group">
            <label> Last Name:</label>
            <input class="form-control" type="text" formControlName="lastName">
            <div class="alert alert-danger alter-ego-errors" *ngIf="lastName.invalid">
              <div *ngIf="lastName.errors.forbiddenName">
                手机号码有误,请重填.
              </div>
            </div>
          </div>
          <div class="form-group">
            <label> account:</label>
            <input class="form-control" type="text" formControlName="account">
            <div *ngIf="account.pending">Validating...</div>
            <div class="alert alert-danger alter-ego-errors" *ngIf="account.invalid && (account.dirty || account.touched)">
              <div *ngIf="account.errors.required">
                account is required.
              </div>
              <div *ngIf="account.errors.msg">
                {{account.errors.msg}}
              </div>
            </div>
          </div>
        </div>
        <p>Form Status: {{ userForm.status }}</p>
        <p>Form Status: {{ userForm.value | json }}</p>
        <button class="btn btn-default" (click)="consoleForm()">Submit</button>
      </form>
    </div>
    
    展开全文
  • 解决异步验证 浏览器不兼容的问题 其实也是借用别人写好的js 。 觉得挺好
  • 将多个验证和异步验证应用于Ember Object属性。 安装 $ component install kelonye/ember-validate 例子 var Person = Em . Object . extend ( require ( 'ember-validate' ) , { validations : { email : [ // ...
  • 异步验证 Node.js 的简单异步验证 用法 var Validation = require ( 'async-validation' ) ; // let's add some custom validator with db call Validation . addValidator ( 'uniqueUsername' , function ( ...
  • 异步验证库 要求 PHP 7.3 外部类型 外部 ext-fileinfo 外部过滤器 ext-gd 哈希 ext-json 扩展库 外部字符串 雷迪斯 除非阻塞上下文外,还应安装以下事件库之一: 安装 composer require harmonyio/validation ...
  • struts2+Hibernate整合异步验证用户名是否存在 我是新手 求大神指教 最好有完整的代码 万分感谢
  • 本工程旨在研究如何使用jquery实现异步验证用户名的唯一性的功能。 本工程编码方式:UTF-8
  • jquery.validate扩展验证+异步验证,请见附件。
    jquery.validate扩展验证+异步验证,请见附件。
    展开全文
  • Ajax异步验证

    千次阅读 2012-09-09 08:21:27
    场景描述: 登录程序大家都不陌生,但如果要注册,则必须保证用户的ID不能...异步验证 var xmlHttp; var flag; function createXMLHttp(){ if (window.XMLHttpRequest){ // 创建XMLHttpRequest核心对象
  • 在实际工作中,我们经常需要一个基于后端API验证值的验证器。为此,Angular提供了一种定义自定义异步验证器的简便方法。本文将介绍如何为Angular应用程序创建自定义异步验证器。通...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 177,897
精华内容 71,158
关键字:

异步验证