jquery获取表单数据(jq表单验证插件)

from表单数据的合法性验证是个很常见的需求，jQuery提供了一个插件：jquery validate 官网下载。

　　　若想使用需先引用jquery.validate.js，并且要在jquery.js之后引用。

<script src=\"//cdn.bootcss.com/jquery/3.4.1/jquery.js\"></script>
<script src=\"js/jquery.validate.js\"></script>

　　　把现在写的项目拿来演示一下，其使用了bootstrap框架。

$(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; } })})
　　

　　　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函数。