jquery表单验证插件（jquery.validate.js）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：
第⼀种⽅式：也是⽐较标准的⽅式：
⾸先引⼊jquery 插件和 jquery 验证插件：
第⼀步：引⼊插件
复制代码代码如下:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="adata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
第⼆步：定义表单的错误输出：
复制代码代码如下:oracle查看当前库的所有表
<style type="text/css">
# {
color: Red;
}
</style>
第三步：添加错误处理⽅法；
jquery验证，需要有：
1：定义验证⽅法
2：添加验证规则
下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。
先看效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="adata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>phpmyadmin怎么使用
<style type="text/css">
# {
color: Red;
}
</style>
</head>
jquery下载文件插件<script type="text/javascript">
$(document).ready(function(){
$("#clickme").click(function(){
alert("Hello World");
});
$( "#frm" ).validate({
rules: {
username: {
required: true,
minlength: 4,
maxlength: 20,
byteMaxLength:20,
valiEnglish:true
},
postcode: {
postcodeVal:true
},
number: {
byteMaxLength:5,
numFormat:5
},
identifier: {
sfzhValidate:true
}
},
messages: {
username: {
required: "请输⼊⽤户名4--20个英⽂字符",
minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")
},
number: {
numFormat: $.format("请输⼊{0}数字")
}
}
});
jQuery.validator.addMethod("byteMaxLength", 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);
}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));
jQuery.validator.addMethod("numFormat",function(value,element,param){
return this.optional(element) || /^\d*$/.test(value);
}
//,$.validator.format("请输⼊数字{0}位以内")
);
//number(9,3)
jQuery.validator.addMethod("numFormat63",function(value,element){
return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
},$.validator.format("请输⼊合法数字，精度格式123456.0")
);
jQuery.validator.addMethod("postcodeVal",function(value,element){
return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);
},$.validator.format("请输⼊合法的邮编")
);
jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
},$.validator.format("请输⼊字母或数字")
);
jQuery.validator.addMethod("sfzhValidate",function(value,element){
return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
},$.validator.format("请输⼊合法⾝份证号")
);
jQuery.validator.addMethod("valiEnglish",function(value,element){
return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
},$.validator.format("请输⼊字母或者空格")
);
});
</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>⽤户名:
<input type="text" name="username" id="username" />
</label>
<p>表格evaluate
<label>邮编 :<label></label></label>
<label>
<input type="text" name="postcode" id="postcode" />
<br />
</label>
js中switch语句例子</p>
<p><label>数字 :
<input type="text" name="number" id="number" />
</label>
<br /><label>⾝份证号：
<input type="text" name="identifier" id="identifier" />
</label>
<label>
<input type="button" name="clickme" id="clickme" value="click me" />
</label>
</p>
</form>
</body>
</html>
这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以
下⾯讲解其中的重点⽅法：
jQuery.validator.addMethod("byteMaxLength", 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);
}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));
jQuery.validator.addMethod() ⽅法，有三个参数,
第⼀个参数： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。
第⼆个参数：是下⾯这个回调（callback）函数：
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);
}
回调函数有三个参数：
第⼀个：value ，是当前验证的元素的值。
第⼆个： element 是当前被验证的元素。
第三个：是传⼊的参数，例如： min : 5 这个参数为5，对于本⽅法调⽤的时候，例如：byteMaxLength：10 其中10为传⼊参数。
这个⽅法的⽅法名为： byteMaxLength 回调函数如上，
回调函数的作⽤就是验证输⼊的为多少个字节，其中⼀个汉字代表两个字符，字符为0-127的ASCII码，其中有⼀句返回：return this.optional(element) 这个函数调⽤的意思是：⽤于表单输⼊值不为空时验证，当field为空时，即element的值为空，this.optional(element) = true, 就是说该filed不是必填项，当不填时也通过验证，如果element的值不为空
this.optional(element) = false 就要根据 || 后⾯的验证来判断返回为true 或false的⽬的，总结起来 this.optional(element) 就是为了说明当前验证的 field不是必填项。
第三个参数：如下：
复制代码代码如下:
$.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)")
这第三个参数可以直接是⼀个message 就是验证的提⽰信息，为了显⽰函数的验证的信息，这个参数也可以通过创建函数jQuery.validator.format(value)来显⽰，其中 {0} 代表该⽅法的参数如果⽅法调⽤如: byteMaxLength : 10 上⾯的输⼊就是不能超过10个字节，（⼀个中⽂字算两个字节）
下⾯看⼀下这段代码：
$( "#frm" ).validate({
rules: {
username: {
required: true,
minlength: 4,
maxlength: 20,
byteMaxLength:20,
valiEnglish:true
},
postcode: {
postcodeVal:true
},
number: {
byteMaxLength:5,
numFormat:5
},
identifier: {
sfzhValidate:true
}
},
messages: {
username: {
required: "请输⼊⽤户名4--20个英⽂字符",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
},
number: {
numFormat: $.format("请输⼊{0}数字")
}
}
});
⾸先这是⼀个⽅法调⽤
复制代码代码如下:
$( "#frm" ).validate([options]）
验证选择的表单，⽅法的参数是可选项，可以输⼊0个或者键值对（key/value）
这个⽅法是为了处理例如：submit , focus , keyup , blur, click 触发验证的，对象是整个表单的元素，
或者是单个元素，使⽤rules和 messages 定义验证的元素，使⽤errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制⾮法元素的错误信息显⽰。
下⾯看 validate 的⽅法 rules();
返回第⼀个选择的元素的验证的规则，有若⼲种⽅式定义验证规则。
rules ⽅法定义了基于id的验证，
复制代码代码如下:
username: {
required: true,
minlength: 4,
maxlength: 20,
byteMaxLength:20,
valiEnglish:true
}
如上：其中，username为 id名， {}中为定义的验证⽅法，就是这个id 的都需要哪些⽅法验证，⽅法名就是上⾯讲到的⽅法；这样就定义了。
messages中定义了：
复制代码代码如下:
username: {
required: "请输⼊⽤户名4--20个英⽂字符",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
}
这个id中⽅法验证错误提⽰信息。其中可以直接输出message或者调⽤ $.format()⽅法。
上⾯的标准格式就是：
复制代码代码如下:
var $params = {debug:false, rules:{}, messages:{}};
$("#frm").validate($params);
rules{}中定义验证规则的⽅法。 messages{}定义错误输出。
以上为第⼀种⽅式：
第⼆种⽅式：和第⼀种基本差不多：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="adata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
# {
color: Red;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#clickme").click(function(){
alert("Hello World");
});
jQuery.validator.addMethod("byteMaxLength", 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);
}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));
jQuery.validator.addMethod("numFormat",function(value,element,param){
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论