Webフロントエンドチェックのjquery.义齿

1752 ワード

jqueryチェックの補足として、整理を行います
前に述べたreadyに検証を加えるほか、htmlのclassに直接検証を加えることもできます.以下のようにします.
補足1:

<form id="testForm" name="testForm">
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>
</form>

次に、documentのreadyイベントに、次の方法を加えます.
<script>
 $(document).ready(function(){
 $("#testForm").validate();
 }
</script>

これによりformがコミットされるとinputで指定したclassに基づいて検証が行われる.失敗するとformのコミットがブロックされます.そして、inputの後ろにヒント情報が表示されます.
また、フォントが赤などの特別なスタイルをエラーメッセージに表示したい場合は、次のように追加します.
<style type="text/css">
#testForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>

補足2:
eventでトリガの有効性を指定できます(オプション値はkeyup(キーを押すたびに)、blur(コントロールがフォーカスを失った場合)、指定しない場合はコミットボタンを押すだけでトリガします).
$(document).ready(function(){
$("#testForm").validate({
 event:"keyup" || "blur"
 })
})

補足3:
Debugをtrueに指定した場合、フォームはコミットされず検証(デフォルトはコミット)にのみ使用され、デバッグに使用できます.
$(document).ready(function(){
$("#testForm").validate({
 debug:true
 })
})

参照先:http://blog.csdn.net/kenkywu/article/details/7163968