脚本语言 订阅所有【脚本语言】的日志

jQuery插件：Validation简单示例

编辑:dnawo 日期:2012-10-22

字体大小: 小 中 大
一、引用脚本

复制内容到剪贴板程序代码 程序代码
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></script>

二、校验方式

方式一：
复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
$(document).ready(function(){
    $("#form1").validate();
});
</script>
<form id="form1" name="form1" method="post" action="">
  Name:<input type="text" name="txtName" id="txtName" class="{required:true,messages:{required:'Please enter your name'}}" />
  <br />
  <input type="submit" name="btnSubmit" id="btnSubmit" value="提交" />
</form>

方式二：
复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
$(document).ready(function(){
    $("#form1").validate({meta: "validate"});
});
</script>
<form id="form1" name="form1" method="post" action="">
  Name:<input type="text" name="txtName" id="txtName" class="{validate:{required:true,messages:{required:'Please enter your name'}}}" />
  <br />
  <input type="submit" name="btnSubmit" id="btnSubmit" value="提交" />
</form>

方式三：
复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
$(document).ready(function(){
    $("#form1").validate({
        rules: { txtName: {required: true}},
        messages: { txtName: {required: 'Please enter your name'}}
    });
});
</script>
<form id="form1" name="form1" method="post" action="">
  Name:<input type="text" name="txtName" id="txtName" />
  <br />
  <input type="submit" name="btnSubmit" id="btnSubmit" value="提交" />
</form>

三、校验规则

引用内容 引用内容
必填：required:true
远程验证：remote:"check.php"
邮件地址：email:true
网址：url:true
日期：date:true
日期格式：dateISO:true
数字：number:true
整数：digits:true
信用卡号：creditcard:
表单比较：equalTo:"#field"
后缀：accept:"mime1,mime2"
最大长度：maxlength:5
最小长度：minlength:10
长度范围：rangelength:[5,10]
值范围：range:[5,10]
最大值：max:5
最小值：min:10

自定义校验规则：

复制内容到剪贴板程序代码 程序代码
//中文为两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
    return this.optional(element) || ( length >= param[0] && length <= param[1] );    
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

//邮政编码验证    
jQuery.validator.addMethod("isZipCode", function(value, element) {    
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

四、提示信息

引用内容 引用内容
messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter 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}.")
}

中文版：

引用内容 引用内容
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} 的值")
});

五、参考资料

[1].jQuery plugin: Validation：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
[2].Plugins/Validation：http://docs.jquery.com/Plugins/Validation
[3].jquery-validation 使用：http://www.cnblogs.com/lichengjava/archive/2011/05/03/validation.html

上一篇: jQuery插件：DataTables分页取数据示例
下一篇: jQuery插件：Validation中success和submitHandler两个方法的区别
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 5467
发表评论
请登录后再发表评论！