一份好用的jquery的表单验证插件

这次给大家带来一份好用的jquery的表单验证插件，使用jquery的表单验证插件的注意事项有哪些，下面就是实战案例，一起来看一下。

jquery的validate插件
前置知识：默认校验规则

使用方法：按顺序引入jquery.js、jquery.validate.min.js和validate-config.js
例：

$.extend($.validator.messages, {    required: "这是必填字段",    ip: "输入格式不正确",    number: '请输入数字',    max: "输入超过了最大值",    min: "输入小于最小值",    minlength: $.validator.format( "输入字符不能少于 {0} 个." ),    maxlength: $.validator.format( "输入字符不能多于 {0} 个." ),    mask: "网关不可达",    remote: "该名称已存在",    equalTo: "两次输入密码不匹配",    notEqualTo: "新密码不能与原始密码相同",    pw  : "必须包含数字、英文字母、特殊字符, 并且大于等于8位"});
$.validator.addMethod("ip",function(value,element,params){    var ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;    if( value === '' ) {        return true;
    }    return ipReg.test( value );
},"输入格式不正确");

代码第1行到第14行是在添加验证信息，第16行后面的代码是在自定义验证函数，返回值为false则显示上面的验证信息。
上面的代码是验证规则的定义，接下来的代码是开始进行验证：

第6行至第23行说明了使用哪些规则，第25行是进行表单提交的事件监听。
注：如果想改变验证信息在dom结构中的位置，使用errorPlacement，如下：

$('.lock-form-register').validate({    rules: {        username: {            required: true,            username: true

        },        password: {            required: true,            pw: true           
        },        confirmpwd : {            required : true,            equalTo : "#pw",             pw: true
        }
    },    errorPlacement: function(error, element) {        //element是被验证的元素，error是包含错误信息的label标签
    }
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

简单的jQuery表单验证插件

简单的jQuery表单验证插件

下载

相关阅读：

简述CSS中clearfix 的原理

JS中的常用函数汇总

html的盒模型详解