jquery 表单验证插件
其他：
<form action=""> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br />
secret: <input type="text" name="secret" value="Yousecret" /><br /> </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();
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
1.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 = $('<span class="msg-box"></span>').appendTo($formitem);
}
return $msgbox;
},
valid:null,// 默认 表单验证通过时调用此函数
valid: 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:"自定义规则的提示消息",
required: "请填写姓名",
rule2: "xxxx",
rule3: "xxxx"
},
//自定义获得焦点时的友好提示信息
tip: "填写真实姓名有助于朋友找到你",
//自定义字段验证成功后显示的消息
ok: "",
//是否启用实时验证，默认继承
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 参数？
msgStyle:"font-size:14px;",//自定义该字段的消息 CSS 样式
getValue:"",//自定义 value 的 getter 参数？
setValue:"",//自定义 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 结构
msgMaker: function(opt){
return '<span class="'+ opt.type +'">' + opt.msg + '</span>';
/* 以上 msgMaker 配置，将生成如下消息结构
<div class="msg-box n-right" for="user[name]">
<span class="n-error">Please fill this field.</span>
</div>
*/
},
msgIcon:"<span class="n-icon"></span>",//自定义消息图标的 HTML 模板
msgArrow:"", //自定义消息箭头的 HTML 模板
msgShow:null, //消息提示之前调用此函数
msgShow:function($msgbox, type){
//
},
msgHide:null,//消息隐藏之前调用此函数
msgHide:function($msgbox, type){
//
}
});
事件：
.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()
$('#form1').validator()
$('#form1').validator()
$('#form1').validator()
$('#form1').validator()
内置规则：
remote(url)
remote(get:URL) 默认postremote(cors:post:/user/checkName) 强制跨域
<input type="text" name="username" 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": "名字已被占用"}}
验证方式：
例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> <!--button type="submit">提交</button--> <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就可以了
例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>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>
提交方式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 }); });
更多精彩
