zoukankan html css js c++ java

Nice Validator

1. 应用需求

在前端对form表单的输入进行验证。例如，对密码的复杂度进行验证；用户名的合法性验证；等等。

2. 使用

1、参照一些前端框架(例如：BJUI)
2、参照官方文档，可以快速上手
有时候需要，结合实际框架，对现有代码进行修改，才能满足使用需求,使用如下：

官网介绍了提交表单三种方式触发验证：

nice-validator 一旦初始化就会阻止表单被提交，直到表单规则全部验证通过。

如果传递了valid参数回调或者valid.form事件，表单即使验证通过也不会被提交，而是由valid参数和valid.form事件接管。然后你需要自己决定如何提交表单。

方式一：点击提交按钮，表单验证通过后自动原生方式提交

<form id="form1" action="register.php">
    <label>Email</label>
    <input type="email" name="email" data-rule="required;email">
    <label>Password</label>
    <input type="password" name="pwd" data-rule="required;length(6~16)">
    <button type="submit">提交</button>
</form>

方式二：使用验证通过回调（参考：valid）

    // dom
    <form id="form1" action="register.php">
        <label>Email</label>
        <input type="email" name="email">
        <label>Password</label>
        <input type="password" name="pwd">
    </form>
    // 初始化验证
    $('#form1').validator({
        fields: {
            'email': 'required;email',
            'pwd': 'required;length(6~16)'
        }
    });

示例三：绑定表单验证通过的事件（参考：valid.form事件）

$('#form1').on('valid.form', function(e){
    // You can do something, then submit form by native
    // this.submit();
    // or use ajax submit
    $.post("path/to/server", $(this).serialize())
        .done(function(d){
            // some code
        });
});

实际应用的时候，可能通过点击事件触发表单提交$.post()，结合示例二。

<button id='form-xxxx' style="display:inline" type="button" class="btn-green" data-icon="search" onclick="SubmitForm('xxxx')">{{i18nDashBoard "DashBoard" "Submit"}}</button> 
function SubmitForm(id){
   //其他操作
    $('#form-'+id).isValid(function(){
      //提交表单操作
      })
    //其他操作
}

3. 规则

自定义规则

对密码复杂度进行校验,这里其实还可以做关联表单的校验。

    var options={
      rules:{
        pwdCheck:function(element){
        var tips=  "提示信息"; 
        var reg = new RegExp("^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)^[a-zA-Z0-9!#*_]{8,20}$");
        if(reg.test(element.value)){
           return true; 
          }         
        // if(typeof element.form.elements["xxx"]== "undefined"){
        //   return true
        // }  
        return tips;
        }
      },
      fields:{
        Password: {
          rule:"pwdCheck",
          must:true //必须每次都要校验，有时候会不校验：是否强制验证该字段
        }
      }  
    }

说明：如果在这个校验逻辑函数里面，需要依赖其他字段，那样就会进行如下调用：

    element.form.elements[xxx].value=123;

element : HTMLInputElement
element.form ：HTMLFormElement
element.form.elements :HTMLFormControlsCollection

内置规则