jq表单验证插件（jquery获取表单数据）

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: '邮箱格式不正确(例如: [e-mail])'            },            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: '邮箱格式不正确(例如: [e-mail])'            },            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函数。