本帖最后由 李盼盼老师 于 2017-12-21 20:17 编辑
jquery validate强大的jquery表单验证插件 【简介】 form表单验证是网站建设中,前端必须做的事情之一,而要自己想一个玩美的没有bug的表单验证,是非常不容易的,这里给大家分享一个基于jquery的强大的表单验证插件,几乎可以满足我们对表单验证的需求, 如果你的网站不可使用jquery,那很抱歉,你无法使用这个插件! 【jquery validate表单验证如何使用】 在引入jquery validate插件前，需要先引入它所依赖的文件jquery.js [JavaScript] 纯文本查看 复制代码 <script src="jquery-1.8.2.min.js"></script>
<scriptsrc="jquery.validate.js"></script> 一、关键代码介绍 1. html代码 [HTML] 纯文本查看 复制代码 <form action="js/test.json" method="post" class="bl-form bl-formhor" id="jsForm">
<ul>
<li class="bl-form-group">
<label><em>*</em>必填：</label>
<div class="controls">
<input id="pwdid" class="fn-tinput" data-rule-remote="http://www.baidu.com" type="password" name="OldPassword" placeholder="原始密码" required data-msg-required="请输入原始密码" minlength="6" data-msg-minlength="至少输入6个字符" />
</div>
</li>
</li>
<li class="bl-form-group">
<label>手机：</label>
<div class="controls">
<input type="text" value="" name="3" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" />
</div>
</li>
………….
<li class="bl-form-group bl-form-btns">
<label class="fn-vhid">提交：</label>
<div class="controls">
<button class="fn-btn btn-primary btn-submit submitBtn" type="submit">提交按钮</button>
<button type="reset" class="fn-btn">重置</button>
</div>
</li>
</ul>
</form>
2. Css代码 表单的样式是随手写了一下，只是看起来稍微好看一点，样式不是重点，验证规则与书写方法和样式无关，可以自行定义 3. Js代码 [JavaScript] 纯文本查看 复制代码 $(function(){
//$('.jsForm') 是你的表单的类名或者 id，如果是id的话就是 $('#jsForm')
//submitHandler 就是表单验证通过的时候执行里面的函数
$('.jsForm').validate({
submitHandler: function (form) {
var $form = $(form),
data = $form.serialize(); //序列化表单数据
//这里是jquery表单验证通过的时候执行的操作，比如这里，表单验证通过的时候执行了jquery的ajax的post操作
$.post('js/test.json',{data:data},function(d){
if(d.Flag){
alert("如果返回为真，将执行这里代码")
}else{
}
},'json');
},
onfocusout: function(element){ //这个设置是,让表单元素失去焦点后,就验证, 如果不需要,则删掉
$(element).valid();
}
});
})二、jquery validate默认验证规则的提示语中文化 因为jquery validate插件中的提示词，默认是英文的，所以我们先把它中文化 $.extend($.validator.messages, { required: "必填", remote: "请修正该字段", email: "电子邮件格式不正确", url: "网址格式不正确", date: "日期格式不正确", dateISO: "请输入合法的日期 (ISO).", number: "请输入数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符", maxlength: $.validator.format("请输入一个 长度最多是 {0} 的字符"), minlength: $.validator.format("请输入一个 长度最少是 {0} 的字符"), rangelength: $.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符"), range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: $.validator.format("请输入一个最大为{0} 的值"), min: $.validator.format("请输入一个最小为{0} 的值") }); 三、validate默认的验证规则中文解释 (1)required:true 必输字段 (2)remote:”check.php”使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期 (6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 (7)number:true 必须输入合法的数字(负数，小数) (8)digits:true 必须输入整数 (9)creditcard: 必须输入合法的信用卡号 (10)equalTo:”#field” 输入值必须和#field相同 (11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀） (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符) (15)range:[5,10] 输入值必须介于 5 和 10 之间 (16)max:5 输入值不能大于5 (17)min:10 输入值不能小于10 validate的默认验证规则是什么意思？ 假如，一个表单元素的要求是必填，那么就在这个表单元素中加一个required 属性
如果这个元素没有填写内容，就会出现提示词
四. 自定义validate表单验证规则 addMethod(name,method,message)方法： 参数name 是添加的方法的名字 参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数 以手机号码验证规则为例： jQuery.validator.addMethod("mobile",function (value, element) { var mobile = /^1[3|4|5|7|8]\d{9}$/; return this.optional(element) ||(mobile.test(value)); } 那么在表单元素中的属性设置为data-msg-mobile=“提示信息”
五. 详细代码，请看案例
| 
收藏
淘帖
踩
