jQuery.validate 用法

最新推荐文章于 2025-06-21 10:46:16 发布

原创最新推荐文章于 2025-06-21 10:46:16 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用jQuery扩展默认验证消息，并自定义校验规则来增强表单验证功能，包括针对特定场景的自定义验证逻辑。

//覆盖默认的提示信息（默认为英文）
jQuery.extend(jQuery.validator.messages, {
        required: "必填字段",
  remote: "请修正该字段",
  email: "请输入正确格式的电子邮件",
  url: "请输入合法的网址",
  date: "请输入合法的日期",
  dateISO: "请输入合法的日期 (ISO).",
  number: "请输入合法的数字",
  digits: "只能输入整数",
  creditcard: "请输入合法的信用卡号",
  equalTo: "请再次输入相同的值",
  accept: "请输入拥有合法后缀名的字符串",
  maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
  minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
  rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
  range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
  max: jQuery.validator.format("请输入一个最大为{0} 的值"),
  min: jQuery.validator.format("请输入一个最小为{0} 的值")
});


//自定义校验规则
jQuery.validator.addMethod("isOther", function(value, element){
    var item = $(element);
    var value = item.val();
    if (value.match(/.*_OTHER$/g) && !$(".relationMark_" + item.attr("class")).val()) {
        alert('请填写对应的其他信息!');
        $(".relationMark_" + item.attr("class")).focus();
        return true;
    }

    return value;
}, '请填写对应的其他信息!');


//定义表单中对应name的校验规则
var validate_rules ={  
        "sysAMForm.tecVerify.sysName":{  
            required: true
        },
        "sysAMForm.tecVerify.operSys":{
            required: true,
            isOther: true
        },
        "sysAMForm.tecVerify.ssoMethod":{
            required: true
        }
  };  


//Form 校验配置绑定
Form_Validator = $("#submitTecVerifyForm").validate({  
          rules: validate_rules,  
          debug: true,  
          wrapper: "div",  
          errorPlacement: function(label, element) {  
              label.addClass('errorClass');  
              label.insertAfter(element);  
          }  
}); 


//手动执行校验
if (!$("#submitTecVerifyForm").valid()) {
      var invalidElements = Form_Validator.invalidElements(); // contain the invalid elements 
      Form_Validator.showErrors();//显示所有错误信息
      $(invalidElements[0]).focus();//定位到有问题的地方
      return false;
}