JQuery外掛使用之Validation 快速完成表單驗證的幾種方式
阿新 • • 發佈:2019-01-24
JQuery的Validation外掛可以到http://plugins.jquery.com/上去下載。今天來分享一下,關於這個外掛的使用。
簡易使用
這第一種方式可謂是傻瓜式的使用,我們只需要按照validation定義好的規則就可以了。
- 首先引入JQuery庫和Validation外掛:
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"> </script>
- 然後是開啟驗證開關:
$(function(){
$("#form_id").validate();
});
// 或者
$(document).ready(function(){
$("#form_id").validate();
});
validation的
build_in
驗證規則有:class = “required”
: 表明表單中該欄位為必選的class = "required email"
表明在表單中該欄位為必須存在的,而且是符合email的規範格式class = "url"
表明在表單中該欄位需要滿足url的匹配模式minlength = "6"
表明在表單中該欄位的長度最小為6位
案例展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Validation for form demo</title>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src ="jquery.validate.min.js"></script>
<style>
em {
font-weight: bold;
vertical-align: top;
color: red;
float: right;
}
label {
width:10em;
padding: 7px;
}
.container {
width: 370px;
height: auto;
background-color: silver;
}
</style>
</head>
<body>
<div align="center" class="container">
<form id="vform" method="post" action="#">
<fieldset>
<legend>使用JQuery外掛validation來實現表單驗證</legend>
<p>
<label for="username">姓名:</label>
<input id="username" name="username" class="required" minlength="2"> <em>*</em>
</p>
<p>
<label for="email">郵件:</label>
<input id="email" name="email" class="required email" > <em>*</em>
</p>
<p>
<label for="url">網址:</label>
<input id="url" name="url" class="url" ></p>
<p>
<label for="comment">評論:</label>
<textarea id="comment" name="comment" class="required"></textarea>
<em>*</em>
</p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</div>
<script>
// $(function(){
// $("#vform").validation();
// });
$(document).ready(function(){
$("#vform").validate();
});
</script>
</body>
</html>
驗證規則全寫到Class中
和簡易使用不同的是,這種方式使用pure
的class來進行控制。但是我們需要引入一個新的外掛jquery.metadate.js
。實現的功能就是幫助使用者將所有的與驗證資料相關的資訊寫到class屬性中,方便管理。
我們可以通過以下幾步來實現這一需求。
- 引入一個新的外掛jquery.metadata.js
<script src="jquery.metadata.js"></script>
- 改變呼叫驗證表單的開關:
$(function(){
$("#form_id").validate();//去掉這行程式碼,修改成下面的
$("#form_id").validate({meta:"validate"});
});
- 將驗證資訊寫到class屬性中。詳見下面的程式碼。
<div align="center" class="container">
<form id="vform" method="post" action="#">
<fieldset>
<legend>使用JQuery外掛validation來實現表單驗證</legend>
<p>
<label for="username">姓名:</label>
<input id="username" name="username" class="{validate: { required : true, minlength : 2 }}" > <em>*</em>
</p>
<p>
<label for="email">郵件:</label>
<input id="email" name="email" class="{validate: { required :true,email :true}}" > <em>*</em>
</p>
<p>
<label for="url">網址:</label>
<input id="url" name="url" class="{validate: {url :true}}" ></p>
<p>
<label for="comment">評論:</label>
<textarea id="comment" name="comment" class="{validate: {required :true}}"></textarea>
<em>*</em>
</p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</div>
注意: Validate寫在class屬性的時候,記得要將驗證規則使用空格分隔開來。 否則程式碼不會正常的執行!
還有就是
$("#vform").validate({meta:"validate"});中validate
這個單詞不能隨意的更改,否則也是不會生效的。
通過name屬性構建驗證規則
下面介紹一種與HTML元素的屬性無直接關聯,而是通過name屬性來關聯欄位和驗證規則的驗證寫法。
優點: 可以實現行為與結構的分離,便與除錯和維護程式碼;
- 表單程式碼,去除所有的class驗證。當然這並不是說我們不可以給欄位新增樣式咯。
<div align="center" class="container">
<form id="vform" method="post" action="#">
<fieldset>
<legend>使用JQuery外掛validation來實現表單驗證</legend>
<p>
<label for="username">姓名:</label>
<input id="username" name="username" > <em>*</em>
</p>
<p>
<label for="email">郵件:</label>
<input id="email" name="email" > <em>*</em>
</p>
<p>
<label for="url">網址:</label>
<input id="url" name="url" ></p>
<p>
<label for="comment">評論:</label>
<textarea id="comment" name="comment" ></textarea>
<em>*</em>
</p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</div>
- JQuery程式碼如下:
<script>
// $(function(){
// $("#vform").validation();
// });
$(function(){
$("#vform").validate({
rules:{
username: {
required: true,
minlength: 6
},
email: {
required: true,
email: true
},
url: "url",
comment: "required"
}
});
});
</script>
- 注意: 使用空格分隔驗證欄位
以上就是關於JQuery外掛Validation的基礎使用了。
國際化之中文化
- 首先引入一箇中文的資訊驗證庫,這個我們可以在下載好的validation的lib包下找到。
<script src="messages_zh.js"></script>
- 第二步就是在驗證規則處新增message欄位,然後輸入自定義的中文資訊。如下:
<script>
// $(function(){
// $("#vform").validation();
// });
$(function(){
$("#vform").validate({
rules:{
username: {
required: true,
minlength: 6,
messages: {
required: '請輸入姓名',
minlength: '請至少輸入6個字元'
}
},
email: {
required: true,
email: true,
messages: {
required: '請輸入郵箱',
email: '請檢查您的郵箱格式!'
}
},
url: {
url: true,
messages: {
url: '請檢查網址的格式!'
}
},
comment: {
required: true,
messages: {
required: '請輸入評論!',
}
}
}
});
});
</script>
不知道怎麼回事,我這段程式碼沒有顯示中文提示,如果大家發現了錯誤在哪裡,歡迎留下您的評論。