jquery 양식 유효성 검사 플러그인을 사용하는 3가지 방법(jquery.validate.js)_jquery
- WBOY원래의
- 2016-05-16 16:07:181796검색
jquery 확인은 매우 간단합니다. 다음은 일반적으로 사용되는 세 가지 방법을 요약한 것입니다.
첫 번째 방법: 비교적 표준적인 방법:
먼저 jquery 플러그인과 jquery 확인 플러그인을 소개합니다.
1단계: 플러그인 소개
685d1d81793ef9a579675e4aaba3b8912cacc6d41bbb37262a98f745aa00fbf0
40a1bca2d71c92afd5582229fdbe7b172cacc6d41bbb37262a98f745aa00fbf0
0519098475794f90d31ee18bf243dac82cacc6d41bbb37262a98f745aa00fbf0
2ac7b19f4602a7427fb36a357403532a2cacc6d41bbb37262a98f745aa00fbf0
2단계:
형식의 오류 출력을 정의합니다.
080b747a20f9163200dd0a7d304ba388
#frm 라벨.오류 {
색상: 빨간색;
}
71da3770f34b4fb716c9a32128458262
3단계: 오류 처리 방법 추가
jquery 확인 요구 사항:
1: 검증 방법 정의
2: 확인 규칙 추가
아래에는 자주 사용되는 검증 예시를 올려두었으니 한눈에 이해하시기 바랍니다.
먼저 렌더링을 살펴보세요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
#frm label.error {
color: Red;
}
</style>
</head>
<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>
<label>邮 编 :<label></label></label>
<label>
<input type="text" name="postcode" id="postcode" />
<br />
</label>
</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"는 메소드 이름을 정의하는 것입니다. 메소드 이름은 고유해야 하며 식별자 플래그입니다.
두 번째 매개변수는 다음 콜백 함수입니다:
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);
}
콜백 함수에는 세 가지 매개변수가 있습니다.
첫 번째 값은 현재 확인된 요소의 값입니다.
두 번째 요소는 현재 검증 중인 요소입니다.
세 번째는 들어오는 매개변수입니다. 예: min: 5 이 매개변수는 5입니다. 이 메소드가 호출되면 예를 들면 다음과 같습니다. byteMaxLength: 10 여기서 10은 들어오는 매개변수입니다.
이 메소드의 메소드 이름은 byteMaxLength입니다. 콜백 함수는 위와 같습니다.
콜백 함수의 기능은 입력된 바이트 수를 확인하는 것입니다. 한 문자는 두 문자를 나타내며 문자는 다음 문장 중 하나를 반환합니다.
return this.Optional(element) 이 함수 호출의 의미는 다음과 같습니다. 양식 입력 값이 비어 있지 않은지 확인하는 데 사용됩니다. 즉, 요소의 값이 비어 있습니다. true는 해당 항목이 필수 항목이 아니며, 작성하지 않아도 검증을 통과한다는 의미입니다. element의 값이 비어 있지 않은 경우 this.Optional(element) = false, true를 반환하는 목적은 true 또는 false는 ||에 대한 검증을 바탕으로 판단됩니다. 요약하면 이 .ional(요소)는 현재 검증된 필드가 필요하지 않음을 나타냅니다.
세 번째 매개변수: 다음과 같습니다.
$.validator.format("{0}바이트를 초과할 수 없습니다. (한자 1자는 2바이트로 계산됩니다.)")
이 세 번째 매개변수는 확인 프롬프트 정보인 메시지를 직접 표시할 수 있으며 함수의 확인 정보를 표시하기 위해 jQuery.validator.format(value) 함수를 생성하여 이 매개변수를 표시할 수도 있습니다. {0}은 이 메소드의 매개변수가 byteMaxLength: 10과 같이 호출되는 경우 위 입력은 10바이트를 초과할 수 없음을 나타냅니다. (한자 1자는 2바이트로 계산됩니다.)
아래 코드를 살펴보세요.
$( "#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([옵션])
验证选择的表单，方法的参数是可选项，可以输入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{}定义错误输出。
以上为第一种方式：
第二种方式：和第一种基本差不多：
以上为第二种方式的代码：其中：
方法定义和第一种一样：在于调用：
function check_infor(){
$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");
$("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");
$("#number").attr("class","{byteMaxLength:6,numFormat:6}");
$("#identifier").attr("class","{sfzhValidate:true}");
}
其中定义了一个javascript方法专门用于为form表单中需要验证的id进行验证：
其中用到了.attr() 方法：这个方法有很多种参数形式 .attr(attributeName,value)方法
attributeName为参数名： value 为参数值
其中下面means 是为 id为username的 元素 的 class 属性 添加值：
"{byteMaxLength:22,valiEnglish:true}"
$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");
这样该id元素就有了验证。
注意： 在自定义的check_infor()调用之前 ，必须首先调用$("#frm").valudate();方法；
第三种方式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
#frm label.error {
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){
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("请输入字母或者空格")
);
$("#frm").validate();
$('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true});
$('#postcode').rules('add', { postcodeVal:true});
$('#number').rules('add', { byteMaxLength:5,numFormat:5});
$('#identifier').rules('add', { sfzhValidate:true});
});
</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
<input type="text" name="username" id="username" />
</label>
<p>
<label>邮 编 :<label></label></label>
<label>
<input type="text" name="postcode" id="postcode" />
<br />
</label>
</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>
第三种方式与其他两种方式不同的地方就是：
$('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true});
$('#postcode').rules('add', { postcodeVal:true});
$('#number').rules('add', { byteMaxLength:5,numFormat:5});
$('#identifier').rules('add', { sfzhValidate:true});
为每一个单独的元素添加验证规则。其中调用了rules( "add", rules )方法：
增加验证规则为匹配的元素。
注意：$("form").validate()方法必须首先被调用。
这个规则也能包含一个messages-object，定义常用的messages。