标题: jQuery插件：Validation简单示例
作者: dnawo
日期: 2012-10-22 11:09 PM
分类: 脚本语言
内容: 一、引用脚本
复制内容到剪贴板 程序代码<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
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.627 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.627 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.627 ms