jquery. validate 학습 노트 (form 폼 검증 도구)
19065 단어 validate
기본 알림 정보 수정 방법
/*
var 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} ")
});자신 이 쓴 demo 는 컨트롤 에 속성 검증 폼 내용 만 추가 합 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/util/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/util/jquery.validate.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<br>
<form action="" id="myform">
<fieldset>
：<br>
<input type="text" name="a" required><br>
<br>
minlength="2" maxlength="5" ， 2， 5:( )<br>
<input id="cname" name="name" minlength="2" minlength="2" maxlength="5" type="text" /><br>
<br>
rangelength="5,10" 5-10 ：( )<br>
<input id="range" name="range" rangelength="5,10" /><br>
<br>
min="11" max="22" ， 11， 22：<br>
<input id="num" name="num" min="11" max="22" type="text" /><br>
<br>
range="11,22" ， 11， 22：<br>
<input id="num1" name="num1" range="11,22" type="text" /><br>
<br>
equalTo="#mypassword" ：<br>
mypassword:<input id="mypassword" name="mypassword" type="password" /><br>
repassword:<input id="repassword" name="repassword" type="password" equalTo="#mypassword" /><br>
<br>
number="true" ： ( ， ) <br>
<input id="number" name="number" number="true" /><br>
<br>
digits="true" ：<br>
<input type="text" digits="true" name="integer" id="integer" ><br>
<br>
email="true" EMAIL：<br>
<input type="text" email="true" name="email" id="email" ><br>
<br>
url="true" URL：（ http(s)://www）<br>
<input type="text" url="true" name="url" id="url" ><br>
<br>
date="true" DATE ：(2003/9/9), ， ， <br>
<input type="text" date="true" name="date" id="date" ><br>
<br>
dateISO="true" dateISO ： ， ， <br>
<input type="text" dateISO="true" name="dateISO" id="dateISO" ><br>
<br>
<font color="red"> ：( )</font><br>
<input type="file" accept="png|txt" name="accept" id="accept" required><br>
<input type="text" accept=".ppp" name="accept1" id="accept1" required><br>
<br>
<font color="red"> ： id name ， 。</font>
<input class="submit" type="submit" value="Submit"/>
</fieldset>
</form>
</body>
</html>
<script>
$(function(){
// ，
$("#myform").validate();
//alert(1);
});
</script>위의 예 는 폼 을 신속하게 검사 할 수 있 지만 제시 정보 가 정교 하지 않 아 사용 자 를 정확하게 제시 할 수 없 기 때문에 다음 과 같은 방법 도 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/util/jquery-1.4.4.js">
</script>
<script type="text/javascript" src="js/util/jquery.validate.min.js">
</script>
<title>
Insert title here
</title>
</head>
<body>
<br>
<!-- -->
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>
、
</legend>
<table>
<tr>
<td>
<label for="username">
Username
</label>
</td>
<td>
<input id="username" name="username" />
</td>
<!-- td ， -->
<td>
</td>
</tr>
<tr>
<td>
<label for="password">
Password
</label>
</td>
<td>
<input id="password" name="password" type="password" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="confirm_password">
Confirm password
</label>
</td>
<td>
<input id="confirm_password" name="confirm_password" type="password" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="sex">
sex
</label>
</td>
<td>
<input id="sex1" name="sex" type="radio" />
<input id="sex2" name="sex" type="radio" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="email">
Email
</label>
</td>
<td>
<input id="email" name="email" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="upload">
Upload
</label>
</td>
<td>
<input type="file" name="upload" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="language">
language
</label>
</td>
<td>
<input type="checkbox" name="language" value="cn" />
<input type="checkbox" name="language" value="en" />
<input type="checkbox" name="language" value="jp" />
<input type="checkbox" name="language" value="ge" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="book">
book
</label>
</td>
<td>
<select name="book" multiple="multiple">
<option value="en">
</option>
<option value="cn">
</option>
<option value="jp">
</option>
<option value="ge">
</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="agree">
</label>
</td>
<td>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input class="submit" type="submit" value="Submit" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<script>
$(document).ready(function() {
// id
$("#signupForm").validate({
// , true。 true， js 。
//onsubmit:false,
//onfocusout:false,
//onkeyup:false,
//onclick:false,
//
//success:function(label){
// label.text("ok!").addClass("success");
//},
//
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
// if ( element.is(":radio") )
// error.appendTo( element.siblings("span") );
// else if ( element.is(":checkbox") ){
// error.appendTo ( element.siblings("span") );
// }
// else
// error.appendTo( element.parent() );
},
rules: {
username: {
required: true,
rangelength: [5, 7]
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
sex: {
required: true
},
email: {
required: true,
email: true
},
language: {
required: true,
rangelength: [2, 3]
},
book: {
required: true,
rangelength: [2, 3]
},
agree: "required",
upload: {
required: true,
accept: "flv|jpg"
}
},
//
messages: {
username: {
required: " ",
rangelength: " {0} {1} "
},
password: {
required: " ",
minlength: " {0} "
},
confirm_password: {
required: " ",
minlength: " {0} ",
equalTo: " "
},
email: " ",
language: {
required: " ",
rangelength: " {0} {1} "
},
book: {
required: " ",
rangelength: " {0} {1} "
},
agree: " ",
upload: {
required: " ",
accept: " flv jpg"
}
}
});
});
</script>비고:
1. rules 대상 에 있 는 key 는 폼 의 "name" 과 "id" 입 니 다. 여기 서 name 과 id 를 대응 하 라 고 요구 합 니 다.
2. message 와 rules 가 대응 하 는 폼 의 이름 입 니 다.
3. rules 의 required 는 검증 내용 이 비어 있 으 면 안 된다 는 것 을 나타 내 고 message 의 required 는 내용 이 비어 있 는 알림 을 표시 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
EasyUI validate js 검증 규칙 파일텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
