ホームページ > 記事 > ウェブフロントエンド > jqueryフォーム検証に合格しましたクラス検証フォームが空ではありません_jquery
jqueryフォーム検証に合格しましたクラス検証フォームが空ではありません_jquery
- WBOYオリジナル
- 2016-05-16 15:34:081262ブラウズ
システムを開発する際、特定のフォームデータが必要になることがよくありますが、jQueryを使ってID認証を行うと効率が悪くなるだけでなく、漏れが発生して後のメンテナンスが困難になります。
この章では、jQuery を使用してフォームのクラスを構成することで統合検証を実行する方法を紹介します。 (ID はページ内で 1 回のみ使用できます。クラスは複数回参照できます)
1: 入力にクラスを追加します。名前は任意に設定できますが、この章では calss を noNull に設定する必要があります。 (入力にすでに class 属性がある場合は、その直後に追加できます)
2: 入力に属性を追加して、後で jquery を通じてフィールドを取得し、それをプロンプトとして使用します。この章のケース プロンプト属性は notNull です。
3: jQuery を使用して、ページ内の calss noNull を持つすべてのフォームを走査し、それが空であるかどうかを確認し、notNull フィールドを取得して空のプロンプトを提供します。
詳しい設定方法は下記事例をご参照ください。この章では、入力、無線、選択、チェックボックスなどの種類について説明します。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form>
<!-- input -->
<div>
姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull">
</div>
<br>
<!-- radio -->
<div>
性别:
男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
女<input type="radio" name="sex" value="1" >
</div>
<br>
<!-- select -->
<div>
年龄：
<select name="age" class="noNull" notNull="年龄">
<option value ="">请选择</option>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</div>
<br>
<!-- checkbox -->
<div>
兴趣：
打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
唱歌<input type="checkbox" name="hobby" value="2">
跳舞<input type="checkbox" name="hobby" value="3">
</div>
<br>
<button type="button" class="btn-c" onclick="bubmi()">保存</button>
</form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
$(".noNull").each(function(){
var name = $(this).attr("name");
if($(this).val()==""){
alert($(this).attr('notNull')+"不能为空");return false;
}
if($(this).attr("type")=="radio"){
if ($("input[name='"+name+"']:checked").size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
if($(this).attr("type")=="checkbox"){
if ($('input[name="'+name+'"]:checked').size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
})
}
</script>
</body>
</html>
以下では、jquery.validate.js 検証プラグインを紹介します
jquery.validate.js は jquery の検証プラグインであり、jquery の利点を利用して、いくつかの一般的な入力を迅速に検証し、独自の検証メソッドを拡張できます。
たとえば、次のようなフォームがあります:
<form id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" class="required"/> </p> <p> <label for="lastname">Lastname</label> <input id="lastname" name="lastname" /> </p> <p> <label for="username">Username</label> <input id="username" name="username" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">Confirm password</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">Email</label> <input id="email" name="email" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
このフォームには、名、姓、ユーザー名、パスワード、確認用パスワード、電子メールが含まれます。それらはすべて空ではなく、電子メールが適切にフォーマットされたアドレスであり、確認用パスワードと一貫したパスワードである必要があります。 jQuery 検証を使用する最も簡単な方法は、jquery.js と jquery validation.js という 2 つの js ファイルを導入することです。次に、それぞれ入力にクラスを追加します。
<input id="firstname" name="firstname" class="required"/> <input id="lastname" name="lastname" class="required"/> <input id="username" name="username" class="required"/> <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"/>
以下は、validate に付属するデフォルトの検証のリストです
必須: "必須フィールド"、
リモート: "このフィールドを修正してください",
email: "メールの正しい形式を入力してください",
url: "正規の URL を入力してください",
date: "法的な日付を入力してください",
dateISO: "有効な日付 (ISO) を入力してください。",
番号: "有効な番号を入力してください",
数字: "整数のみを入力できます",
Creditcard: "有効なクレジット カード番号を入力してください",
qualTo: "同じ値を再度入力してください",
accept: "有効なサフィックスを含む文字列を入力してください",
maxlength: jQuery.format("長さが {0} 以内の文字列を入力してください"),
minlength: jQuery.format("少なくとも {0} の長さの文字列を入力してください"),
rangelength: jQuery.format("{0} から {1} までの長さの文字列を入力してください"),
range: jQuery.format("{0} から {1} までの値を入力してください"),
max: jQuery.format("{0}までの値を入力してください"),
min: jQuery.format("最小値 {0} を入力してください")
次に、ドキュメントの読み取りイベントに次のメソッドを追加します。
<script>
$(document).ready(function(){
$("#signupForm").validate();
}
</script>
このようにして、フォームが送信されると、入力で指定されたクラスに基づいて検証されます。失敗した場合、フォームの送信はブロックされます。そして、入力の後ろにプロンプト情報が表示されます。
しかし、検証ルールが HTML コードに侵入するので、これは気分が悪いです。もう一つの方法は、「ルール」を使用することです。入力の検証クラスを削除します。次に、ドキュメントの Ready イベント応答コードを変更します:
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})
この方法でも同様の効果が得られます。
では、次の疑問は、表示されるエラーメッセージがデフォルトなのかということです。カスタム プロンプトを使用する必要があります:
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})
エラー メッセージに特別なスタイル (フォントが赤など) も表示したい場合は、以下を追加できます:
<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>
入力パスワードの長さの検証ルールを引き続き追加します:
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})
リモートを使用する
イベントを通じてエフェクトのトリガー方法を指定できます (オプションの値には、キーアップ (キーが押されるたび)、ブラー (コントロールがフォーカスを失ったとき) が含まれます。指定しない場合は、送信ボタンが押されたときにのみトリガーされます)押した）
$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})
debug を true に指定すると、フォームは送信されず、検証のみに使用され (デフォルトは送信)、デバッグにも使用できます
$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})
送信する前にカスタム処理を実行する必要がある場合は、submitHandler パラメータを使用します
$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})