jquery validate 검사 양식
8622 단어 jQuery Validate
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
/*
$.validator.addMethod("checkCartLength",function(value,element,params){})
$.validator.addMethod
checkCartLength:
function(value,element,params):
value:
element:
params:
*/
//
$.validator.addMethod("checkCardLength",function(value,element,params){
var len = value.length;
if(len!=15&&len!=18) {
return false;
}
return true;
});
// 15
$.validator.addMethod("checkCardLength15",function(value,element,params){
var len = value.length;
if(len==15) {
var pattern = /^[\d]{15}$/;
var flag = pattern.test(value);
if(!flag) {
return false;
}
return true;
}
return true;
});
// 18
$.validator.addMethod("checkCardLength18",function(value,element,params){
var len = value.length;
if(len==18) {
var pattern = /^[\d]{18}|[\d]{17}[X]{1}$/;
var flag = pattern.test(value);
if(!flag) {
return false;
}
return true;
}
return true;
});
$(document).ready(function() {
$("#empForm").validate({
rules: {
realname: {
required:true
},
username: {
required:true,
rangelength:[5,8]
},
psw: {
required:true,
rangelength:[6,12]
},
psw2: {
required:true,
rangelength:[6,12],
equalTo:"#psw"
},
gender: {
required:true
},
age: {
required:true,
range:[26,50]
},
edu: {
required:true
},
birthday: {
required:true,
date:true
},
checkbox1: {
required:true
},
email: {
required:true,
email:true
},
card: {
required:true,
checkCardLength:1,
checkCardLength15:1,
checkCardLength18:1
}
},
messages: {
realname: {
required:" "
},
username: {
required:" ",
rangelength:" 5-8 "
},
psw: {
required:" ",
rangelength:" 6-12 "
},
psw2: {
required:" ",
rangelength:" 6-12 ",
equalTo:" "
},
gender: {
required:" "
},
age: {
required:" ",
range:" 26-50 "
},
edu: {
required:" "
},
birthday: {
required:" ",
date:" "
},
checkbox1: {
required:" "
},
email: {
required:" ",
email:" "
},
card: {
required:" ",
checkCardLength:" ",
checkCardLength15:" 15 ",
checkCardLength18:" 18 "
}
}
});
});
</script>
</head>
<body>
<p> </p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td> ( , )</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td> ( , 5-8 , ( )):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td> ( , 6-12 , ):</td>
<td><input type="password" id="psw" name="psw" style="width:120px" /></td>
</tr>
<tr>
<td> ( , 6-12 , ):</td>
<td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
</tr>
<tr>
<td> ( )</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/>
<input type="radio" id="gender_female" value="f" name="gender"/>
<label style="display:none" for="gender" class="error"> </label>
</td>
</tr>
<tr>
<td> ( 26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td> :</td>
<td> <select name="edu" id="edu">
<option value="">－－ －－</option>
<option value="a"> </option>
<option value="b"> </option>
<option value="c"> </option>
<option value="e"> </option>
<option value="d"> </option>
</select>
</td>
</tr>
<tr>
<td> (1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" style="width:120px" value="" /></td>
</tr>
<tr>
<td> :</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/>
<input type="checkbox" name="checkbox1" id="qq2" value="1" />
<input type="checkbox" name="checkbox1" id="qq3" value="2" />
<input type="checkbox" name="checkbox1" id="qq4" value="3" />
<input type="checkbox" name="checkbox1" id="qq5" value="4" />
<label style="display: none" for="checkbox1" class="error"> , </label>
</td>
</tr>
<tr>
<td align="left"> :</td>
<td><input type="text" id="email" style="width:120px" name="email" /></td>
</tr>
<tr>
<td align="left"> (15-18):</td>
<td><input type="text" id="card" style="width:200px" name="card" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value=" "></td>
</tr>
</table>
</form>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery Validate input은 동적으로 변경됩니다.양식 유효성 검사 input이 동적 변화일 때class='required'같은 방식을 사용할 수 있지만 메시지는 영문입니다. 메시지의 내용을 변경하려면 js 코드에 다음과 같이 추가할 수 있습니다. 이 파일을 메시지...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
