摘要:使用下载后包中的或者就是简体中文的消息语言包引入和开始使用默认校验规则必须输入的字段。使用方法调用验证输入值。日期校验出错,慎用。必须输入合法的信用卡号。输入拥有合法后缀名的字符串上传文件的后缀。
业务上需要进行验证判断,感觉一个一个写太麻烦,于是乎在网上搜索到jQuery-Validate这个表单插件
首先需要引入jquery包
在https://jqueryvalidation.org/官网下载好插件后引入使用。
使用下载后包中的 messages_zh.js或者messages_zh.min.js 就是简体中文的消息语言包
引入jquery.validate.min.js和messages_zh.min.js 开始使用
默认校验规则
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
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。
demo:
$("#add-admin-form").validate({ rules:{ role: "required", userName:{ required: true, maxlength: 20 }, realName:{ required: true, maxlength: 20 } }, messages:{ role: "请选择您的角色", userName:{ required: "请输入用户名", maxlength: "用户名过长" }, realName:{ required: "请输入用户名", maxlength: "真是姓名过长" } } })
rlues代表验证规则;
messages:标验证错误后显示的文字
其中role、realName等字段都是表单中input的name值
用以下方法使用自定义验证,这里的自定义验证有点不太一样,需要先新增自定义方法 然后进行form表单验证的时候进行试用
jQuery.validator.addMethod("isPhone", function (value, element) { return /^0?(13[0-9]|15[012356789]|17[0135678]|18[0-9]|14[57])[0-9]{8}$/.test(value); }, "请正确填写您的手机号码");
通过以上方法进行验证可以实现自定义;
分类使用,有时候我们需要进行多个input 或者select的联合验证 这时候就可以使用groups
$("#add-admin-form").validate({ groups: { username: "province city district" //username定义的组名,province city district 是元素name }, rules: { role: "required", userName: { required: true, maxlength: 20 }, realName: { required: true, maxlength: 20 }, phone: { isPhone: true }, gender: { isGender: true, }, province: { isPlace: true }, city: { isPlace: true }, district: { isPlace: true }, school: "required" }, messages: { role: "请选择您的角色", userName: { required: "请输入用户名", maxlength: "用户名过长" }, realName: { required: "请输入用户名", maxlength: "真是姓名过长" }, phone: "请输入正确的手机号", gender: { isGender: "请选择您的性别" }, province: "请选择您的所在地", city: "请选择您的所在地", district: "请选择您的所在地", school: "请选择您的学校" }, errorPlacement: function (error, element) { //错误提示在什么地方 if (element.attr("name") == "province" || element.attr("name") == "city" || element.attr("name") == "district") { error.insertAfter("#district"); //如果是fname和lname呢,就#lastname后面 } else { error.insertAfter(element); } }, })
其中groups和errorPlacement是必不可少的,前者进行关于元素的分组处理,后者进行处理操作后error的位置问题
用空格隔开后分别定义多个元素
在rules中也要定义它自己的规则 同样可使用required或者自定义判断都可以
同样消息也是用同样的方法
errorPlacement书体不过if else 进行分类处理 定位error的表示位置
radiobox和checkbox效果好像没出来 我使用自定义函数实现的 以后琢磨琢磨
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85012.html
摘要:号称不用写一行代码就能验证表单。动态表单验证现在更聪明,它会自动检测您的表单的修改并相应地调整其验证。简单地添加,删除或编辑字段,将会自动验证。还有好多手机号码格式有误请填写手机号验证表单注意是我自定义的验证规则,添加到里面的 基本对比 名称 gitbub地址 stars 文档地址 jquery-validation 这里 7859(截止7/21) 这里 Parsley....
摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...
阅读 1020·2021-11-15 18:11
阅读 3132·2021-09-22 15:33
阅读 3444·2021-09-01 11:42
阅读 2610·2021-08-24 10:03
阅读 3594·2021-07-29 13:50
阅读 2908·2019-08-30 14:08
阅读 1233·2019-08-28 17:56
阅读 2242·2019-08-26 13:57