2021-11-18 15:39:37
网络推广，网站推广，SEO推广，SEO公司，网络营销，网络公司，网站排名，网络推广公司，网站推广公司，网站优化公司，整站优化，SEO培训从表单数据的合法性验证是个很常见的需求，jQuery提供了一个插件：jquery验证官网下载。
若想使用需先引用jquery.validate.js，并且要在jquery.js之后引用。
脚本src='//cdn。布斯。com/jquery/3。4 .1/jquery。js /脚本
脚本src=' js/jquery。验证。js /脚本
把现在写的项目拿来演示一下，其使用了引导程序框架。
$(函数(){ 0
jquery。验证器。add method(' RegSername '，
函数（值、元素){ 0
返回这个。可选(元素)| | /^[0-9]*[a-za-z_\u4e00-\u9fa5[0-9]* $/.测试（值);
},
'注册昵称为4-10位数字、下划线、中文或英文字母，但不能全是数字');jquery。验证器。addmethod(' isMobile '，
函数（值、元素){ 0
可变长度=值长度；
var mobile=/^((\(\d{2,3}\))|(\d{3}\-))？1[3，8，5]{ 1 } \ d { 9 } $/；
返回this.optional(element) ||(长度==11移动。测试(值))；
},
'请正确填写您的手机号码');//登录帐号合法性验证jquery。验证器。addmethod(' LogAccountCheck '，函数（值，元素){ var length=value . length var mobile=/^((\(\d{2,3}\))|(\d{3}\-)？1[3，8，5]{ 1 } \ d { 9 } $/；返回这个。可选(element)| |(length==11 mobile。测试(值))| | /^[\u0391-\uffe5\w]$/。测试（值);}, '昵称不符合登录规则');$('#fillForm ').validate({错误元素： ' span '，errorClass: 'help-block '，focusInvalid: false，规则3360 { new _ username : {必需d : true，regUserName: true，n
bsp; minlength: 4, maxlength: 10 }, new_userPwd: { required: true, rangelength: [5, 15] }, new_userPwd_twice: { required: true, equalTo: "#new_userPwd" }, new_userEmail: { required: true, email: true }, new_userPhone: { required: true, isMobile:true, digits: true, minlength: 11, maxlength: 11 }, new_userBirth: { required: true }, new_userCollege: { required: true }, new_userMajor: { required: true } }, messages: { new_userName: { required: '昵称不能为空', minlength: '昵称最少为4位', maxlength: '昵称最多为10位' }, new_userPwd: { required: '密码不能为空', rangelength: $.validator.format("密码长度必须在 {0} 到 {1} 之间") }, new_userPwd_twice: { required: '此项不能为空', equalTo: '两次输入的密码必须一致' }, new_userEmail: { required: '邮箱不能为空', email: '邮箱格式不正确(例如: xxx@xx.com)' }, new_userPhone: { required: '电话号不能为空', digits: '电话号必须是数字', minlength: '电话号为11位', maxlength: '电话号为11位' }, new_userBirth: { required: '生日不能为空' }, new_userCollege: { required: '学院不能为空' }, new_userMajor: { required: '专业不能为空' } }, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error').addClass('has-success'); label.remove(); }, errorPlacement: function (error, element) { element.parent('div').after(error); }, submitHandler: function (form) { var result = { "new_userName": $("#new_userName").val(), "new_userPwd": $("#new_userPwd").val(), "new_userEmail": $("#new_userEmail").val(), "new_userPhone": $("#new_userPhone").val(), "new_userBirth": $("#new_userBirth").val(), "new_userGender": $("input[name='new_userGender']:checked").val(), "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val() }; result.new_userIP = ip; var res = JSON.stringify(result); alert(res); return false; } })})html文件跟平常一样，主要在js中进行验证：
$(function() {
jQuery.validator.addMethod("regUserName",
function(value, element) {
return this.optional(element) || /^[0-9]*[a-zA-Z_\u4e00-\u9fa5]+[0-9]*$/.test(value);
},
"注册昵称为4-10位数字、下划线、中文或英文字母，但不能全是数字"); jQuery.validator.addMethod("isMobile",
function(value, element) {
var length = value.length;
var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
},
"请正确填写您的手机号码"); //登录帐号合法性验证 jQuery.validator.addMethod("logAccountCheck", function (value, element) { var length = value.length; var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "昵称不符合登录规则");$("#fillForm").validate({ errorElement: 'span', errorClass: 'help-block', focusInvalid: false, rules: { new_userName: { required: true, regUserName: true, minlength: 4, maxlength: 10 }, new_userPwd: { required: true, rangelength: [5, 15] }, new_userPwd_twice: { required: true, equalTo: "#new_userPwd" }, new_userEmail: { required: true, email: true }, new_userPhone: { required: true, isMobile:true, digits: true, minlength: 11, maxlength: 11 }, new_userBirth: { required: true }, new_userCollege: { required: true }, new_userMajor: { required: true } }, messages: { new_userName: { required: '昵称不能为空', minlength: '昵称最少为4位', maxlength: '昵称最多为10位' }, new_userPwd: { required: '密码不能为空', rangelength: $.validator.format("密码长度必须在 {0} 到 {1} 之间") }, new_userPwd_twice: { required: '此项不能为空', equalTo: '两次输入的密码必须一致' }, new_userEmail: { required: '邮箱不能为空', email: '邮箱格式不正确(例如: xxx@xx.com)' }, new_userPhone: { required: '电话号不能为空', digits: '电话号必须是数字', minlength: '电话号为11位', maxlength: '电话号为11位' }, new_userBirth: { required: '生日不能为空' }, new_userCollege: { required: '学院不能为空' }, new_userMajor: { required: '专业不能为空' } }, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error').addClass('has-success'); label.remove(); }, errorPlacement: function (error, element) { element.parent('div').after(error); }, submitHandler: function (form) { var result = { "new_userName": $("#new_userName").val(), "new_userPwd": $("#new_userPwd").val(), "new_userEmail": $("#new_userEmail").val(), "new_userPhone": $("#new_userPhone").val(), "new_userBirth": $("#new_userBirth").val(), "new_userGender": $("input[name='new_userGender']:checked").val(), "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val() }; result.new_userIP = ip; var res = JSON.stringify(result); alert(res); return false; } })})
简单用法：
1.：rules里定义输入框规则，常见的有required, minlength, maxlength, email, 其中使用输入框的name属性来指定输入框。
2：messages里定义当输入内容不符合规则时显示的信息，如果自定义则显示默认的错误信息。
3：可以自定义规则，比如上面代码开头部分定义了自定义规则，可以根据自己的需求仿照代码即可，而且网上也提供了现成的自定义验证规则。
4：当输入框均符合规则时，可以点击提交，此时，会指定submitHandler函数。
SEO,SEO优化,网站优化,网站SEO,优化公司,关键词优化,关键词排名,搜索引擎优化尽在老铁外链网
