jquery強力な検証コントロールjquery-validate
一、紹介と規則
一般的に開発をする際には、フロントエンドで提出されたフォームを検証する方法が多く、自分で書いたものが多いが、jquer-validateというツールを勉強して、確かに使いやすいと感じた.
まず、対応するページにjqueryと必要な空間のjsを導入します.
デフォルトの検証ルール:
またradioやcheckbox、selectについては対応するinputまたはselectにclass="{"対応する検証方式"}"を加える必要がある
一般的にこの3つはプロジェクトで使用されることが多いのが必須か必須かが「required:true」です.
非同期検証についてはajaxを使用して検証します.
使用する必要がある:remote
具体的なルール:
リモートアドレスは「true」または「false」しか出力できず、他の出力は出力できません.
リモート・アドレスが「true」または「false」しか出力できない理由については、このツールの役割は検証、すなわち「Yes」または「非」であり、個人用ajax検証が比較的多いのはデータベース名が重複しているかどうかを検証することであることが理解できます.
実は使い方も簡単です
rulesに検証が必要なものを書いて、下のinputボックスが必須で、空ではありません.とinputボックスの長さが最小4
Messages:検証に失敗した場合にヒントが必要な情報を記入します.messagesに書かなくてもいいし、デフォルトのヒントは英語で、自分で1つの言語パッケージだけを作って置き換えることもできます.私は開発時に直接下に書きました~.~
二、例
以下は自分で書いた簡単な例です.
対応するajax検証コード(ajax.php):
一般的に開発をする際には、フロントエンドで提出されたフォームを検証する方法が多く、自分で書いたものが多いが、jquer-validateというツールを勉強して、確かに使いやすいと感じた.
まず、対応するページにjqueryと必要な空間のjsを導入します.
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>デフォルトの検証ルール:
(1)、required:true
(2)、remote:"remote-valid.jsp" ajax remote-valid.jsp
(3)、email:true
(4)、url:true
(5)、date:true ， ie6 ，
(6)、dateISO:true (ISO)， ：2009-06-23，1998/01/22 ，
(7)、number:true ( ， )
(8)、digits:true
(9)、creditcard:true
(10)、equalTo:"#password" #password
(11)、accept: （ ）
(12)、maxlength:5 5 ( )
(13)、minlength:10 10 ( )
(14)、rangelength:[5,10] 5 10 ")( )
(15)、range:[5,10] 5 10
(16)、max:5 5
(17)、min:10 10またradioやcheckbox、selectについては対応するinputまたはselectにclass="{"対応する検証方式"}"を加える必要がある
一般的にこの3つはプロジェクトで使用されることが多いのが必須か必須かが「required:true」です.
非同期検証についてはajaxを使用して検証します.
使用する必要がある:remote
具体的なルール:
remote: {
url: "url ", //
type: "post", //
dataType: "json", //
data: { //
username: function() { return $("#name").val();
}
}
}リモートアドレスは「true」または「false」しか出力できず、他の出力は出力できません.
リモート・アドレスが「true」または「false」しか出力できない理由については、このツールの役割は検証、すなわち「Yes」または「非」であり、個人用ajax検証が比較的多いのはデータベース名が重複しているかどうかを検証することであることが理解できます.
実は使い方も簡単です
rulesに検証が必要なものを書いて、下のinputボックスが必須で、空ではありません.とinputボックスの長さが最小4
Messages:検証に失敗した場合にヒントが必要な情報を記入します.messagesに書かなくてもいいし、デフォルトのヒントは英語で、自分で1つの言語パッケージだけを作って置き換えることもできます.私は開発時に直接下に書きました~.~
rules:{
name:{
required:true,
minlength:4
}
}
messages:{
name:{
required:" ",
minlength:" 4 "
}
}二、例
以下は自分で書いた簡単な例です.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-validation</title>
</head>
<style>
.error{
color:#F00;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<body>
<form method="post" action="#" id="the_from" class="the-from">
<p>
<label> </label>
<input id="cname" name="name" type="text" />
</p>
<p>
<label> </label>
<input id="cemail" name="email" type="text" />
</p>
<label> </label>
<select class="{required:true}" id="select" name="select">
<option value=""> </option>
<option value="1"> </option>
<option value="0"> </option>
</select>
</p>
<p>
<label> </label>
<textarea id="comment" name="comment"></textarea>
</p>
<p>
<p>
<input id="submit" type="submit" value=" ">
</p>
</form>
</body>
</html>
<script>
$.validator.setDefaults({
submitHandler: function() {
$('#the_from').submit();
}
});
$().ready(function() {
$("#the_from").validate({
rules:{
name:{
required:true,
minlength:4,
remote:{
url:"ajax.php",
type:"post",
dataType:"json",
data:{
id:function(){return "1";},
val:function(){return $("#cname").val();}
}
}
},
email:{
required:true,
email: true
},
comment:{
required:true
},
select:{
required:true
}
},
messages:{
name:{
required:" ",
minlength:" 4 ",
remote:"ajax "
},
email:{
required:" ",
email: " "
},
comment:{
required:" "
},
select:{
required:" "
}
}
});
});
</script>対応するajax検証コード(ajax.php):
<?php
$id=$_POST['id'];
$val=$_POST['val'];
/*
*
* 123456
*/
$result="123456";
if($val==$result){
exit("false");
}else{
exit("true");
}