jquery 表单验证插件

其他：

<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
secret: 

form>


$("form").serialize(); //FirstName=Bill&LastName=Gates

一般用法：
$.ajax({
    type: 'post',
    url: 'your url',
    data: $("form").serialize(),
    success: function(data) {
        // your code
    }
});

serializeArray()读取form表单中的所有数据列表

var siginList =  $('form').serializeArray();

我是一个可被编辑的DIV

一.jqeuryvalidate

 

二.nice-validate

 

更多>>>

 

官方文档

 

参数选项

$("form").validator({
    debug        :0,              //调试

    //0：关闭实时验证，只在提交表单的时候执行验证
    //1：输入框失去焦点（focusout）时执行验证
    //2：输入框改变值（input）时执行验证
    //3：输入框失去焦点和改变值（综合 1 + 2） (v0.8.0+)
    //8：同 2，并且详细提示每个规则的结果 (v0.9.0+)
    //9：同 3，并且详细提示每个规则的结果 (v0.9.0+)
    //大于 100 的数值：验证延迟时间    
    timely       :1;             //实时验证
    
    theme        :"default",      //主题
    stopOnError  :false,         //在第一次错误时停止验证  关闭此开关，以便一次性显示所有消息
    focusInvalid :true,          //第一个错误字段自动获得焦点
    focusCleanup :false,          //输入框获得焦点时清除验证消息
    ignoreBlank  :false,         //不验证空值的字段（只针对实时验证）
    ignore       :"",         // 默认忽略验证 jQuery 选择器选中的字段
    ignore       :':hidden',         //任何不可见的元素，都不作验证       
    ignore       :'#tab2',         //id为tab2下的所有子元素都不作验证       
    display:'null',                //  自定义消息中{0}的替换字符
    display:Function(elem){       //  自定义消息中{0}的替换字符
        return $(elem).closest('.form-item').children('label:eq(0)').text();
    },         
    target       :null,         //默认 自定义消息的显示位置
    target       :'#myContainer',         // 将所有消息全部提示在 id 为 myContainer 里面
    target:Function(elem){// 自己指定消息容器位置
        var $formitem = $(elem).closest('.form-item'),
            $msgbox = $formitem.find('span.msg-box');
        if (!$msgbox.length) {
            $msgbox = $('').appendTo($formitem);
        }
        return $msgbox;
    },
    valid:null,//  默认   表单验证通过时调用此函数
    invalid: function(form){//表单验证通过时调用此函数
        // 表单验证通过，提交表单
        $.post(url, $(form).serialize() ).done(function(d){
                // some code
        });
    },
    invalid:null,//表单验证失败后的回调。也可以使用 invalid.form 事件
    invalid:function(){
        //$('#form').on('invalid.form', function(e, form, errors){});
    },
    validation:null,//验证每个字段后调用此函数
    validation: function(element, result){
        $("#submitBtn").prop('disabled', !element.form.isValid)
    },
    rules:null,//自定义规则
    rules: {//自定义用于当前实例的规则，支持两种定义方式
        // 自定义验证函数，具有最大的灵活性
        myRule: function(el, param, field){
            //验证并返回布尔值
        },
        // 简单配置正则及错误消息
        another: [/^\w*$/, 'Please enter the letters or underscore.']
    },
    messages:null,//自定义消息
    messages: {
        required: "不能为空",
        email: "请填写正确的邮件地址",
        myRule:"自定义规则的提示消息"
    },
    fields:null,//配置字段规则及参数
    fields: {
        //为input[name=foo]调用前面定义的两个规则
        foo: 'required; myRule[param]; another',
        username: {
            //字段规则
            rule: "姓名: required; myRule; rule2; rule3",
            //(自定义字段中?)每个规则的错误消息
            msg: {
                myRule:"自定义规则的提示消息",   #注意这里值为false和""则会显示默认的错误提示
                required: "请填写姓名",
                rule2: "xxxx",
                rule3: "xxxx"
            },
            //自定义获得焦点时的友好提示信息
            tip: "填写真实姓名有助于朋友找到你",
            //自定义字段验证成功后显示的消息
            ok: "{0}填写正确",   //返回姓名填写正确  
            //是否启用实时验证，默认继承
            timely: false,
//验证当前字段，但是实际上在 target 的元素上提示错误消息
            //如果目标元素是输入框（input，textarea、select），将会以目标元素为基准点，插入一条消息；
            //如果目标元素是消息占位（className 为 msg-box），这和直接使用消息占位没有区别
            //其他情况下，直接显示在target指向的容器中
            target: "#msg_holder",
            //字段验证通过的回调            
            valid:function(form){},
            //字段验证失败的回调
            valid:function(form){},
            //使用 dataFilter 回调可以转换 ajax 返回的结果为 nice-validator 支持的格式
            dataFilter:function(form){},
            must:true,//是否强制验证该字段

            msgWrapper:"span",//自定义该字段的消息容器的标签名
            msgMaker:"",//自定义该字段的消息生成器 参数？
            msgClass:"",//自定义该字段的消息Class  在.msg-box消息容器标签上
            msgStyle:"font-size:14px;",//自定义该字段的消息 CSS 样式   绑定在.msg-box消息容器标签上 
            getValue:function(){},//自定义 value 的 getter 参数？
            setValue:function(){},//自定义 value 的 setter 参数？
        },
    },
    beforeSubmit :null,//在提交表单之前调用此函数
    beforeSubmit:function(form){
        //一般在提交之前修改某些form元素
    },
    dataFilter:null,//转换服务端通过ajax返回的数据为插件支持的格式一般和remote默认规则搭配使用
    dataFilter:function(data){
        //假设服务端返回结果为： {"status":600, "msg":"名字已被占用"}
        if (data.status === 200) return "";
        else return data.msg;        
    },
//主题相关的参数
    showOk:true,//默认 是否显示成功提示(前提是有传ok的消息) 返回布尔 或者字符串
    showOk:false,//如果设置成false在字段验证通过后将只是简单的隐藏消息。
    showOk:'正确',//如果传递一个字符串，在验证通过后将提示这个消息
    showOk:'',//如果设置成空字符串，将只显示一个成功的图标
    validClass:'has-succes', //为验证通过的form表单添加的class名
    invalidClass:"has-error",//验证不通过的输入框添加的class名
    bindClassTo:"#verifiable",//设置 validClass 和 invalidClass 添加到的位置
    formClass:"n-default",    //主题的 class 名称，添加在 form 上
    msgClass: "n-top",     //消息将自动显示在输入框上边
    msgClass: "n-right",   //默认 消息将自动显示在输入框右边
    msgClass: "n-bottom",  //消息将自动显示在输入框下边
    msgClass: "n-left",    //消息将自动显示在输入框左边
    msgClass: "n-right myclass",    //消息将自动显示在输入框右边，你还可以通过myclass来定义更多样式
    msgStyle:"margin-left:-10px; margin-top:10px;",//为消息容器 自定义css
    msgWrapper:"span",//消息容器的元素标签
    msgMaker:null,//自定义消息 HTML 结构   为false则不生成提示消息
    msgMaker: function(opt){
        return '' + opt.msg + '';
        /*             opt包含的子属性

          type：消息类型（可能的值为：error / ok / tip / loading）

          cls： 即msgClass参数的值

          style： 即msgStyle参数的值

          icon： 即msgIcon参数的值

          arrow： 即msgArrow参数的值

          show： 即msgShow参数的值

          hide： 即msgHide参数的值

        以上 msgMaker 配置，将生成如下消息结构
        

            Please fill this field.
        
         */        
    },
    msgIcon:"",//自定义消息图标的 HTML 模板
    msgArrow:"", //自定义消息箭头的 HTML 模板
    msgShow:null, //消息提示之前调用此函数
    msgShow:function($msgbox, type){
        //
    },
    msgHide:null,//消息隐藏之前调用此函数
    msgHide:function($msgbox, type){
        //
    }


});

消息体html结构：

 

class="msg-box" for="quanxian" style="">
    class="msg-wrap n-error">
        class="n-icon">
        class="n-msg">协议必选
    

 

 

 

事件：

.on("validation")：描述：每次验证完一个字段，都会触发 validation 事件，通过该事件可以获取到当前验证字段的验证结果。

$('#form').on('validation', function(e, current){
    var form = this;
    // form 中是否所有字段都验证通过
    console.log(form.isValid);
    // 当前验证字段是否通过
    console.log(current.isValid);

    // 打印其他属性
    console.log(current.element);
    console.log(current.value);
    console.log(current.msg);
});

View Code

.on("valid.form")：在表单验证通过后触发

$('#form').on('valid.form', function(e, form){
    //do something...
});

View Code

.on("invalid.form")：在表单验证不通过后触发

$('#form').on('invalid.form', function(e, form, errors){
    //do something...
});

View Code

.on("valid.field")：在字段验证通过后触发

$('#username').on('valid.field', function(e, result){
    //do something...
});

View Code

.on("invalid.field")：在字段验证不通过后触发

$('#username').on('invalid.field', function(e, result){
    //do something...
});

View Code

.on("valid.rule")：在规则验证通过后触发

$('#username').on('valid.rule', function(e, ruleName){
    if (ruleName === 'remote') {
        //do something...
    }
});

View Code

.on("invalid.rule")：在规则验证不通过后触发

$('#username').on('invalid.rule', function(e, ruleName){
    if (ruleName === 'remote') {
        //do something...
    }
});

View Code

发布：

.trigger("validate")：手动触发字段执行验证

触发类型
//①$input.trigger("validate"); 手动触发元素进行验证 
//如：手动调用username字段验证 
$('input[name="username"]').trigger("validate");

//②$form.trigger("validate"); v0.7.0+  手动触发表单进行验证，验证通过后不会自动提交
//如：手动调用表单验证
$('#form').trigger("validate");

//③$form.trigger("submit"); 手动触发表单提交，在提交前会自动验证
//如：手动调用表单提交
$('#form').trigger("submit");

//④$input.trigger("showtip"); v0.5.0+ 触发元素显示tip消息
//手动调用验证初始化完成后，立即显示所有字段的提示
$('#form').validator().trigger("showtip");

.trigger("showmsg", [type, message])：触发字段提示消息

// 手动调用字段验证成功消息
$("#username").trigger("showmsg", ["ok", "Great name"]);
// 手动调用input字段验证错误消息
$("#username").trigger("showmsg", ["error", "Name is already taken"]);
// 手动调用（input聚焦选中）友好的提示消息
$("#username").trigger("showmsg", ["tip", "Others make a good name for you impressed"]);
// 手动调用已经绑定的提示消息 (data-tip)
$("#username").trigger("showmsg", ["tip"]);
// 手动调用所有提示消息
$("#form").trigger("showmsg", ["tip"]);

.trigger("hidemsg")：触发字段隐藏消息

// 手动调用隐藏指定字段的消息
$("#username").trigger("hidemsg");
// 手动调用隐藏整个表单的提示消息
$("#form").trigger("hidemsg");

插件方法：

$('#form1').validator({选项参数})      : 根据参数初始化验证，验证 jQuery 选中的表单

$('#form1').validator(function(){})    : 初始化验证，验证 jQuery 选中的表单，验证通过后执行回调

// 等同于 $('#form1').validator({  valid: function(){},  });

$('#form1').validator(instanceMethod, arg1, arg2... )    :通过.validator() 方法调用实例方法？

// 清空表单验证消息
$('#form1').validator("cleanUp");
// 销毁表单验证
$('#form1').validator("destroy");

$('#form1').isValid( callback ) 判断某个区域或者某个字段是否验证通过，如果字段中有异步 ajax 验证，需要通过 callback 获取验证结果

// 使用回调函数获取验证结果
$('#mobile').isValid(function(v){
    if (v) {
        // do something
    }
});
// v0.10.5+ 还支持下面这种写法，即回调不带参数，就是验证通过的回调
$('#mobile').isValid(function(){
    // do something
});
// 如果验证的字段中没有 ajax 异步验证，直接获取结果也是可以的
if ( $('#mobile').isValid() ) {
    // do something
} 

静态方法

$.validator(selector, options)

// 即使 "#form1" 这个表单被动态加载，也可以验证
$.validator("#form1", {
    timely: 2,
    stopOnError: true,
    fields: {
        email: "required;email",
        password: "required;length(6~16)",
        mobile: "required;mobile"
    }
});

$.validator.config(options)：配置全局选项   建议配置在 local 配置文件（如：zh-CN.js）中

$.validator.config({
    timely: 2
});

$.validator.config( rules: { mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"], chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"] } );

$.validator.setTheme(name, options)：配置全局主题    参考配置选项

$.validator.setTheme("myTheme", {
    formClass: "nice-flat",
    msgClass: "n-right",
    timely: 2,
    stopOnError: true
});

instance （实例方法）

.test(elem, rule)：验证字段是否符合指定的规则 返回布尔

$("#myForm").validator({
    rules: {
        loginName: function(element) {
            return /^[a-zA-Z]\w{3,}/.test(element.value)
                   || this.test(element, "mobile")
                   || this.test(element, "email")
                   || 'Please fill user name, phone number or E-mail';
        }
    },
    fields: {
        username: "required; loginName",
        password: "required; length(6~16)"
    }
});

.setField(key, field)：动态配置字段参数

$('form').validator("setField", "username", "required;");
// Remove the field's verification.
$('form').validator("setField", "username", null);

.setField(obj)：动态配置字段参数

$('form').validator("setField", {
    username: "required;username",
    pwd: "required;password"
});

.showMsg(elem, obj)：使字段提示消息（不推荐），推荐使用.trigger("showmsg")

.hideMsg(elem)：使字段隐藏消息（不推荐），推荐使用.trigger("hidemsg")

.holdSubmit(hold)：防止表单重复提交的措施

$("#myForm").validator({
    valid: function(form){
        var me = this;
        // Before submitting the form, hold form, to prevent duplicate submission.
        me.holdSubmit();
        $.ajax({
            url: "xxx.php",
            data: $(form).serialize(),
            type: "POST",
            success: function(){
                // After the form is submitted successfully, release hold.
                me.holdSubmit(false);
            }
        });
    }
});

.cleanUp()：清除表单中的全部验证消息

$('#form1').validator('cleanUp');

.destroy()：销毁表单验证实例

$('#form1').validator('destroy');

 

内置规则：

required - 使字段必填 适用于 input、textarea、select(注意 ："：filled" 是一个jquey的选择器扩展，匹配填充值了的表单元素，用法和:checked、:radio、:checkbox一致)

①required
②required("input:filled" )、required(#id:checked)、required(#id:enabled)、...
③required(ruleName)     满足规则（某个默认规则自定义规则） ruleName 则字段必填
④required(from, class, count) ：className 为 contact 的字段至少填写一个
eg：
class="contact" name="mobile" placeholder="手机号"
data-rule="required(from, .contact); mobile"
data-msg-required="请至少填写一种联系方式">

class="contact" name="tel" placeholder="电话"
data-rule="required(from, .contact); tel">

class="contact" name="email" placeholder="邮箱"
data-rule="required(from, .contact); email">

⑤required(not, value)  必填但排除value

View Code

checked - 必选，还可以控制选择项目的数量 

规则                        描述
checked                必选
checked(n)        必选 n 项
checked(n~)        至少选择 n 项
checked(~n)        最多选择 n 项
checked(n1~n2)    选择 n1 到 n2 项

View Code

match - 当前字段与另一个字段比较

规则                             描述
match(name)                     当前字段值必须和 name 字段的值匹配
match(eq, name)                 同上
match(neq, name)                当前字段值必须和 name 字段值不同
match(lt, name)                 当前字段值必须小于 name 字段值
match(gt, name)                 当前字段值必须大于 name 字段值
match(lte, name)                当前字段值必须小于等于 name 字段值
match(gte, name)                当前字段值必须大于等于 name 字段值
match(gte, name, date)          当前日期值必须大 于等于 name 字段日期值
match(gte, name, datetime)      当前时间值必须大于等于 name 字段时间值   

View Code

 

 

remote - 获取服务器端验证的结果

remote(url)
remote(get:URL)   默认post
remote(cors:post:/user/checkName) 强制跨域


data-rule="required;remote({:U('User/test')})"
>

然后经过user控制器test方法处理后返回
返回是字符串：返回" ":通过； 不为空 则 将作为错误信息输出

返回json时：

// 验证通过
{"ok": "名字很棒"}          //$msg['ok']="名字很棒";echo json_encode($msg);
// 验证不通过
{"error": "名字已被占用"}   //$msg['error']="名字已被占用";echo json_encode($msg);

// 结果在第二级 data
{"status": 200, "data": {"error": "名字已被占用"}}

View Code

integer - 只能填写整数

规则                    描述
integer            整数
integer(+)            正整数
integer(+0)    正整数和零
integer(-)            负整数
integer(-0)    负整数和零

View Code

 

range - 只能填写指定范围的数

规则                            描述
range(n~)                    请填写不小于 n 的数
range(~n)                    请填写不大于 n 的数
range(n1~n2)            请填写 n1 到 n2 的数
range(n1~n2, false)    请填写 n1 到 n2 的数（不包含边界值）(v0.9.0+)

View Code

 

length - 字段值必须符合指定长度

规则                             描述
length(n)                     请填写 n 个字符
length(n~)             请至少填写 n 个字符
length(~n)             请最多填写 n 个字符
length(n1~n2)             请填写 n1 到 n2 个字符
length(n~, true)     请至少填写 n 个字符（全角字符计算双字符）

View Code

 

filter - 过滤当前字段的值，不做验证

规则                    描述
filter                    过滤 <>`"' 和字符实体编码的字符
filter(RegExp)    自定义过滤正则

View Code

 

验证方式：

例1. DOM传参    DOM 绑定规则，无需 JS 代码

1. 要验证一个表单，只需要给字段绑定规则“data-rule”就可以了
2. 字段可以有多条规则，规则之间用分号（;）分隔
3. js初始化不是必要的，只要是字段并且带有“data-rule”属性，即使是新插入的一段DOM也可以立马验证
4. 其中：required是内置规则（核心自带），username、password是配置文件中设置的全局规则（配置文件）

<form id="demo_11" action="results.php" method="post" autocomplete="off">
<fieldset>
<p><input name="user[name]" data-rule="required;username" placeholder="用户名">p>
<p><input name="user[pwd]" data-rule="required;password" placeholder="密码">p>
fieldset>
<button type="submit">提交button>
form>
<input type="text" name="username" data-rule="required;">          :提示  此处不能为空
<input type="text" name="username" data-rule="用户名:required;">    :提示  用户名不能为空

<input type="text" name="username"
data-rule="required;"
data-tip="输入你的名字与姓氏。"     可选：聚焦提示
data-ok="名字很棒。"              可选：默认为一个绿色的勾
data-msg-required="全名必填!"     可选：data-msg-指定的规则  默认错误只显示红色的X     
>

 

 

例2. js传参（这和上面的DOM传参等价）  JS 配置规则，无侵入 DOM

HTML
<form id="demo_12" action="results.php" method="post" autocomplete="off">
    <fieldset>
        <p><input name="user[name]" placeholder="用户名">p>
        <p><input name="user[pwd]" placeholder="密码">p>
    fieldset>
    
    <a href="javascript:" class="submit-btn">提交a>
form>

Javascript
$('#demo_12').validator({
    fields: {
        'user[name]': 'required; username;'
        ,'user[pwd]': 'required; password;'
    }
})
// 使用链接代替submit按钮（注意：这种情况下输入框里面的回车键不能触发submit事件）
$("#xxoo").on("click", "a.submit-btn", function(e){
    $(e.delegateTarget).trigger("submit");
});

例3. radio的必选

1. 对于checkbox和radio，要“必填”的话，不能使用“required”，而是使用“checked”
2. 你只需要在第一个checkbox或者radio上面绑定规则就可以了
3. 消息会自动生成，并且显示在最后面，你无需关注消息怎么显示

<form id="demo_51" action="results.php" method="post" autocomplete="off">
<fieldset>
<label class="form-label">性别：label>
<label><input type="radio" name="gender" value="1" data-rule="checked">男label>
<label><input type="radio" name="gender" value="2">女label>
<label><input type="radio" name="gender" value="0">保密label>
fieldset>
<div class="form-submit">
<button type="submit">提交button>
div>
form>


<form id="demo_52" action="results.php" method="post" autocomplete="off">
<fieldset>
<label class="form-label">兴趣：label>
<label><input type="checkbox" name="interest[]" value="0" data-rule="checked">看书label>
<label><input type="checkbox" name="interest[]" value="1">上网label>
<label><input type="checkbox" name="interest[]" value="2">睡觉label>
<label><input type="checkbox" name="interest[]" value="3">运动label>
<label><input type="checkbox" name="interest[]" value="4">发呆label>
fieldset>
<div class="form-submit">
<button type="submit">提交button>
div>
form>

控制选中项目数

1. checked[2~]表示选择的项目要在2项以上
2. 不要对:radio使用参数，因为本身就是单选，直接checked就可以了

< form id="demo_53" action="results.php" method="post" autocomplete="off">

< fieldset>

< label class="form-label">兴趣：label>

< label><input type="checkbox" name="interest[]" value="0" data-rule="checked[2~]">看书label>

< label><input type="checkbox" name="interest[]" value="1">上网label>

< label><input type="checkbox" name="interest[]" value="2">睡觉label>

< label><input type="checkbox" name="interest[]" value="3">运动label>

< label><input type="checkbox" name="interest[]" value="4">发呆label>

fieldset>

< div class="form-submit">

< button type="submit">提交button>

div>

form>

例4. Ajax提交表单

1. 可以通过valid参数传入回调，参见配置
2. 也可以直接接收valid.form事件（下面例子采用接收事件的方式），参见事件

HTML
<div id="result_14" class="tip-ok" style="display:none">提交成功div>
<form id="demo_14" autocomplete="off"
data-validator-option="{theme:'simple_right'}"
>
<fieldset>
<p><input name="username" data-rule="用户名:required;username" placeholder="用户名">p>
<p><input name="password" data-rule="密码:required;password" placeholder="密码">p>
fieldset>
<button type="submit">提交button>
form>

Javascript
//接收表单验证通过的事件
$('#demo_14').bind('valid.form', function(){
$.ajax({
url: 'results.php',
type: 'POST',
data: $(this).serialize(),
success: function(d){
$('#result_14').fadeIn(300).delay(2000).fadeOut(500);
}
});
});

自定义规则：

注意：自定义规则如果与内置规则同名，则自定义规则优先

通过 DOM 方式自定义规则（只对当前字段有效）

<input name="demo" data-rule="required; xxx" data-rule-xxx="[/^\d{6}$/, '请输入6位数字']">

通过 rules 配置规则（当前表单实例有效）

<input name="demo">

$('#form1').validator({
    rules: {
        // 使用正则表达式定义规则
        mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
        // 使用函数定义规则
        xxx: function(elem, param) {
            return /^1[3458]\d{9}$/.test($(elem).val()) || '请检查手机号格式'; 
        }
    },
    fields: {
        // 对字段 username 应用规则 mobile
        'username': 'required;mobile'
    }
});

 

全局规则：

 

 

提交方式：

提交方式1：表单验证通过后自动原生方式提交

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

提交方式2：js使用验证通过回调

$('#form1').validator({
    valid: function(form) {
        // do something
        // use native submit.
        form.submit();
    }
});

提交方式3：绑定表单验证通过的事件（参考：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
        });
});

 

转载于:https://www.cnblogs.com/lichihua/p/10815069.html