Jquery.validate.js表单验证

来源：互联网发布：软件授权解决方案编辑：程序博客网时间：2024/05/12 17:16

一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API: http://jquery.bassistance.de/api-browser/plugins.html

官方文档：http://docs.jquery.com/Plugins/Validation/Methods

二、引入js文件

三、编写验证js

$(function () {    $(document.forms[0]).validate({        rules: {            UserName: { required: true, minlength: 6, maxlength: 12 },            Password: { required: true, minlength: 5, maxlength: 12 }        },        messages: {            "UserName": {                required: "用户名不能为空.",                minlength: "最少6位",                maxlength:"最多12位"            },            "Password": {                required:"密码不能为空."            }        }    });})

二、默认校验规则
(1)required:true               必输字段
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值（下面详细说明）
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期
(6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true                 必须输入合法的数字(负数，小数)
(8)digits:true                 必须输入整数
(9)creditcard:                 必须输入合法的信用卡号
(10)equalTo:"#field"           输入值必须和#field相同
(11)accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                      输入值不能大于5
(17)min:10                     输入值不能小于10

remote：URL
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote: "check-email.php"
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

远程地址只能输出 "true" 或 "false"，不能有其它输出

三、默认的提示

messages: {
    required:"This field is required.",
    remote:"Please fix this field.",
    email:"Please enter a valid email address.",
    url: "Pleaseenter a valid URL.",
    date:"Please enter a valid date.",
    dateISO:"Please enter a valid date (ISO).",
    dateDE:"Bitte geben Sie ein g眉ltiges Datum ein.",
    number:"Please enter a valid number.",
    numberDE:"Bitte geben Sie eine Nummer ein.",
    digits:"Please enter only digits",
    creditcard:"Please enter a valid credit card number.",
    equalTo:"Please enter the same value again.",
    accept:"Please enter a value with a valid extension.",
    maxlength:$.validator.format("Please enter no more than {0}characters."),
    minlength:$.validator.format("Please enter at least {0} characters."),
    rangelength:$.validator.format("Please enter a value between {0} and {1}characters long."),
    range:$.validator.format("Please enter a value between {0} and{1}."),
    max:$.validator.format("Please enter a value less than or equal to{0}."),
    min:$.validator.format("Please enter a value greater than or equal to{0}.")
}

如需要修改提示消息，可在js代码中加入：

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} 的字符串"),
  range:jQuery.validator.format("请输入一个介于{0} 和 {1} 之间的值"),
  max:jQuery.validator.format("请输入一个最大为{0} 的值"),
  min:jQuery.validator.format("请输入一个最小为{0} 的值")
});

推荐做法，将此文件放入messages_cn.js中，在页面中引入
<script src="../js/messages_cn.js"type="text/javascript"></script>