validate は、強力な検証機能を提供する優れた jq プラグインで、クライアント フォームの検証を容易にし、さまざまなアプリケーションのニーズを満たす多数のカスタマイズ オプションも提供します。このプラグインには、URL や電子メール検証などの一連の便利な検証メソッドがバンドルされており、ユーザー定義メソッドを作成するための API が提供されます。
JavaScript を使用する最も一般的な機会はフォーム検証です。また、優れた JavaScript ライブラリである jQuery は、優れたフォーム検証プラグイン ----Validation も提供します。 Validation は最も古い jQuery プラグインの 1 つであり、世界中のさまざまなプロジェクトによって検証され、多くの Web 開発者によって賞賛されています。標準的な検証メソッドライブラリとして、Validation には次のような特徴があります。
1. 組み込みの検証ルール: 必須、番号、電子メール、URL、クレジット カード番号など 19 種類の組み込みの検証ルールがあります。
2. 検証ルールのカスタマイズ: 検証ルールを簡単にカスタマイズできます
3. シンプルで強力な検証情報プロンプト: デフォルトで検証情報プロンプトが提供され、デフォルトのプロンプト情報をカスタマイズする機能が提供されます
4リアルタイム検証: 合格する可能性があります。フォームの送信時だけでなく、keyup または Blur イベントでも検証がトリガーされます。
validate.js のダウンロード アドレス: http://plugins.jquery.com/project/validate
metadata.js のダウンロード アドレス: http://plugins.jquery.com/project/metadata 使用方法:
1. jQuery ライブラリと Validation プラグインの導入
コードは次のとおりです。
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> <script src="scripts/jquery.validate.js" type="text/javascript"></script>
2. どのフォームを検証する必要があるかを決定します。
コードは次のとおりです。以下のように:
<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
$("#commentForm").validate();
});
//]]>
</script>3. さまざまなフィールドの検証ルールをコード化し、フィールドの対応する属性を設定します。
コードは次のとおりです。 🎜>
class="required" 必须填写 class="required email" 必须填写且内容符合Email格式验证 class="url" 符合URL格式验证 minlength="2" 最小长度为2 可验证的规则有19种： [javascript] view plaincopyprint? required: 必选字段 remote: "请修正该字段", email: 电子邮件验证 url: 网址验证 date: 日期验证 dateISO: 日期 (ISO)验证 dateDE: number: 数字验证 numberDE: digits: 只能输入整数 creditcard: 信用卡号验证 equalTo: ”请再次输入相同的值“验证 accept: 拥有合法后缀名的字符串验证 maxlength/minlength: 最大/最小长度验证 rangelength: 字符串长度范围验证 range: 数字范围验证 max/min: 最大值/最小值验证
を導入する必要があります。 js
コードは次のとおりです:
<script type="text/javascript" src="../../scripts/jquery-1.3.1.js"></script> <script type="text/javascript" src="lib/jquery.validate.js"></script>
初期化された HTML
コードは次のとおりです:
<script type="text/javascript">
$(function(){
$("#commentForm").validate()
})
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的validate验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" class="url" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required" ></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>| シリアル数値 | ルール
| < spam style="background-color: rgb(255,255,255)">説明<🎜> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | required:true | 必ず入力するフィールドです。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2 | remote:"check.php" | ajax メソッドを使用して check.php を呼び出し、入力値を確認します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 3 | email:true | 正しい形式の電子メールを入力する必要があります。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 4 | url:true | URL は正しい形式で入力する必要があります。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 5 | date:true | 日付は正しい形式で入力する必要があります。日付検証 ie6 エラー。注意して使用してください。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 6 | dateISO:true | 日付 (ISO) を正しい形式で入力する必要があります (例: 2009-) 06-23、1998/01/22。形式のみが検証され、有効性は検証されません。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 7 | number:true | 有効な数値 (負の数、小数) を入力する必要があります。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 8 | digits:true | 整数を入力する必要があります。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 9 | クレジットカード: | 有効なクレジット カード番号を入力する必要があります。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 10 | equalTo:"#field" | 入力値は #field と同じである必要があります。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 11 | accept: | 有効なサフィックス (アップロードされたファイルのサフィックス) を含む文字列を入力します。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 12 | maxlength:5 | 最大長 5 の文字列を入力します (漢字は 1 文字としてカウントされます)。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 13 | minlength:10 | 最小長 10 の文字列を入力します (中国語の文字は 1 文字としてカウントされます)。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 14 | rangelength:[5,10] | 入力長は 5 ～ 10 である必要があります (中国語の文字は次のようにカウントされます) 1文字）。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 15 | range:[5,10] | 入力値は 5 ～ 10 でなければなりません。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 16 | max:5 | 入力値は 5 を超えることはできません。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 17 | min:10 | 入力値は 10 未満にすることはできません。 |
required表示必须填写的
email表示必须正确的邮箱
把验证的规格写在HTML内的class内，方法欠妥，后期的维护增加成本，没有实现行为与结构的分离
所以，可以想把HTML内的class都清空，如下:
代码如下:
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的validate验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" ></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>js
代码如下:
$(document).ready(function(){
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required",
valcode: {
formula: "7+9"
}
}
});
});
</script>因为默认的提示是英文的，可以改写成
代码如下:
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
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} 的值")
});建议新建一个js,放到validate.js 下面.
关于提示的美化
代码如下:
errorElement:"em"
创建一个标签，可以自定义
代码如下:
success:function(label){
label.text(" ").addClass('success')
}这里的参数label是指向创建的标签，这里也就是”em“ 然后情况自己的内容，在加上自己的class就可以了
完整的js
代码如下:
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required",
},
errorElement:"em",
success:function(label){
label.text(" ").addClass('success')
}
});相对应的css
代码如下:
em.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}.success放到.error下面。。。唔唔。。具体的情况。。只可体会不可言会。。唔。。
在做项目的过程中千变万化，有时候要满足不同的需求，validate也可以单独的修改验证的信息。。
例如：
代码如下:
messages:{
username:{
required:"主人,我要填的满满的",
minlength:"哎唷,长度不够耶"
}
}完整的js
代码如下:
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required",
valcode: {
formula: "7+9"
}
},
messages:{
username:{
required:"主人,我要填的满满的",
minlength:"哎唷,长度不够耶"
}
},
errorElement:"em",
success:function(label){
label.text(" ").addClass('success')
}
});这里就可以啦。
关于自定义验证规则
增加一段HTML代码
代码如下:
<p>
<label for="cvalcode">验证码</label>
<input id="valcode" name="valcode" />=7+9
</p>自定一个规则
代码如下:
$.validator.addMethod("formula",function(value,element,param){
return value==eval(param)
},"请正确输入验证信息");formula是需要验证方法的名字 好比如required 必须的。
value返回的当前input的value值
param返回的是当前自定义的验证格式 好比如：7+9
在试用了eval方法 让字符串相加
完整的js
代码如下:
$.validator.addMethod("formula",function(value,element,param){
return value==eval(param)
},"请正确输入验证信息");
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required",
valcode: {
formula: "7+9"
}
},
messages:{
username:{
required:"主人,我要填的满满的",
minlength:"哎唷,长度不够耶"
}
},
errorElement:"em",
success:function(label){
label.text(" ").addClass('success')
}
});完
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
