validate插件使用

ldh_lyf

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2026-03-23 00:26:58 发布 832 阅读 AI 写同款· GEO 优化 ›

使用jQuery validate插件验证表单使用JQuery validate插件验证表单阅读详情

引入js

使用：

（1）控件属性方式

</form>

（2）JS 键值对传参方式

$(function(){
               $("#f1").validate(
                   {
                   /*
                   * 表单校验，两大元素：
                   * 校验规则
                   * 对应的提示
                   *
                   */
                   //规则部分
                   rules:{
                       //校验账号
                       username:{
                           //账号的校验规则
                           required:true
                       }
                   },
                   //错误提示部分
                   messages:{
                       //账号错误提示
                       username:{
                           required:"账号必填"
                       }
                   }
               });
           });

校验规则：

规则名	说明
required:true	必须输入字段
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期（IE6 验证出错）
dateISO:true	必须输入正确格式的日期(ISO) （只验证格式，不验证有效）
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入正整数
creditcard:true	必须输入合法的信用卡号，例如：5105105105105100
equalTo:”#field”	输入值必须和#field 相同 equalTo:"input[name='pwd']"
minlength:5	输入长度最小是 5 的字符串(汉字算一个字符)
maxlength:10	输入长度最多是 10 的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度介于 5 和 10 之间的字符串”)(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
min:5	输入值不能小于 5
max:10	输入值不能大于 10
remote:”check.php”	使用 ajax 方法调用 check.php 验证输入值

开启调试模式禁止提交

当我们在调试时，只需要检测能否验证，而不需要页面进行跳转时，可以开启调试模式禁止提交

$('#reg').validate({
debug : true,

});

当我们需要阻止表单提交的时候，还要执行程序，这时就可以设置其他方式代替默认提交

$('#reg').validate({
    submitHandler : function(){
    // some action
    },
});

设置成功后加载的样式

Validate.js插件内置的验证成功的样式为”valid”，我们可以在CSS样式中自定义valid的样式：

.valid{
        background: url(right.png) no-repeat right;
        background-size: auto 100%;
        border: 2px solid green;
    }

当然，也可以修改验证提示消息，可以自定义标签的样式以及添加文字说明：

success : function(label){
label.addClass('labelStyle').text('ok');

高亮显示有错误的元素

highlight : function(element,errorClass){
$(element).css('border','3px solid red');

当输入成功时，需要取消高亮显示的错误，需要用到unhighlight：

unhighlight : function(element,errorClass){
$(element).css('border','1px solid green');

}

remote异步验证

remote:url，可以对表单进行 ajax 验证，默认会提交当前验证的值到远程地址。例如我们在注册时，需要通过后台服务器验证该账号是否被注册，这时就需要用到ajax，其具体使用方法可参照下面：

rules : {
        user : {
                required : true,
                rangelength:[3,5],
                remote : 'user.php',
                }
                },

messages : {
        user : {
                required : '帐号不得为空！',
                rangelength : '帐号长度需要在 {0}-{1} 位之间！',
                remote : '账号被占用',
                },

validation怎么显示错误提示的

1、错误提示是validation自己添加的
2、怎么添加，在当前输入项后面是一 label 标签添加
3、设置的两个属性：
class = "error"

for = "输入项的name值"

可以使用 CSS 修改错误提示的样式

使用 label标签或 error 这个 class

label {
               color: red;
           }
           .error {
               color: red;

}

要让错误提示在输入项后面换行

可以自定义错误标签的位置

使用label 标签，里面必须属性 class="error" for="name值"

编写实现自定义类型
$.validator.addMethod("校验类型名",function(value){

该校验的算法实现 });