Webフロントエンドチェックのjquery.义齿
1752 ワード
jqueryチェックの補足として、整理を行います
前に述べたreadyに検証を加えるほか、htmlのclassに直接検証を加えることもできます.以下のようにします.
補足1:
次に、documentのreadyイベントに、次の方法を加えます.
これによりformがコミットされるとinputで指定したclassに基づいて検証が行われる.失敗するとformのコミットがブロックされます.そして、inputの後ろにヒント情報が表示されます.
また、フォントが赤などの特別なスタイルをエラーメッセージに表示したい場合は、次のように追加します.
補足2:
eventでトリガの有効性を指定できます(オプション値はkeyup(キーを押すたびに)、blur(コントロールがフォーカスを失った場合)、指定しない場合はコミットボタンを押すだけでトリガします).
補足3:
Debugをtrueに指定した場合、フォームはコミットされず検証(デフォルトはコミット)にのみ使用され、デバッグに使用できます.
参照先:http://blog.csdn.net/kenkywu/article/details/7163968
前に述べた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