FastAdmin表單驗證data-rule插件—Nice-validator的使用方法
FastAdmin的表單驗證data-rule非常方便，也很炫酷。采用的Nice-validator是一款非常強(qiáng)大的表單驗證插件，通過簡單在元素上配置規(guī)則，即可達(dá)到驗證的效果。怎么使用Nice-validator插件呢？
1. 加載插件
nice-validator 依賴 [jQuery]1。除了直接引用插件，還支持 AMD 模塊系統(tǒng)。
(1)、直接引用
一行代碼引入插件，local 參數(shù)用來加載對應(yīng)的配置文件。如果不傳 local 參數(shù)，配置以及樣式就需要自行引入
<script src="path/to/nice-validator/jquery.validator.js?local=zh-CN"></script>
(2)、通過 RequireJS 模塊系統(tǒng)
requirejs.config({
paths: {
jquery: 'http://cdn.jsdelivr.net/jquery/1.12.3/jquery.min',
validator: 'path/to/nice-validator/local/zh-CN'
},
shim: {
validator: ['path/to/nice-validator/jquery.validator.js?css']
}
});
require(['jquery', 'validator'], function($){
$('#form1').validator();
});2. 了解規(guī)則
(1)、規(guī)則語句中的符號：
- 分號
;- 分隔多個規(guī)則，也代表邏輯與 - 冒號
:- 分隔 display（字段顯示名）與規(guī)則語句 - 括號
()- 規(guī)則傳參使用，也可以使用方括號（[ ]） - 逗號
,- 分隔規(guī)則的參數(shù)，注意：逗號后需加空格 - 波浪
~- 定義范圍值使用 - 俺的
&- 邏輯與，用在某個規(guī)則前面，與;（分號）效果差不多 - 嘆號
!- 邏輯非，用在某個規(guī)則前面，對規(guī)則取反 - 豎線
|- 邏輯或，用在多個規(guī)則之間，多個規(guī)則滿足之一則通過
示例：
// 單個規(guī)則 "required" // 多個規(guī)則 "required; email; remote(/server/check/email)" // 范圍參數(shù) "range(1~100)" // 規(guī)則有多個參數(shù) "match(neq, oldPassword)" // 定義顯示替換名稱 "郵箱: required; email" // 邏輯或 "required; mobile|email; remote(/server/check/user)" // 邏輯非 "required; !digits"
(2)、配置規(guī)則
示例：DOM 配置規(guī)則，使用 data-rule
<input name="email" data-rule="required;email;remote(/path/to/server)">
示例：JS 配置規(guī)則，使用 fields 參數(shù)
$("#form").validator({
fields: {
email: "required;email;remote(/path/to/server)"
}
});(3)、內(nèi)置規(guī)則
插件內(nèi)置 8 個規(guī)則：
- required - 使字段必填
- checked - 必選，還可以控制選擇項目的數(shù)量
- match - 當(dāng)前字段與另一個字段比較
- remote - 獲取服務(wù)器端驗證的結(jié)果
- integer - 只能填寫整數(shù)
- range - 只能填寫指定范圍的數(shù)
- length - 字段值必須符合指定長度
- filter - 過濾當(dāng)前字段的值，不做驗證
自定義規(guī)則如果與內(nèi)置規(guī)則同名，則自定義規(guī)則優(yōu)先
(4)、自定義規(guī)則
示例：在 local/zh-CN.js 中配置全局規(guī)則（全局生效）
$.validator.config({
rules: {
mobile: [/^1[3-9]\d{9}$/, "請?zhí)顚懹行У氖謾C(jī)號"],
chinese: [/^[\u0391-\uFFE5]+$/, "請?zhí)顚懼形淖址?]
}
});示例：通過 DOM 方式自定義規(guī)則（只對當(dāng)前字段有效）
<input name="demo" data-rule="required; xxx" data-rule-xxx="[/^\d{6}$/, '請輸入6位數(shù)字']">示例：通過 rules 配置規(guī)則（當(dāng)前表單實例有效）
$('#form1').validator({
rules: {
// 使用正則表達(dá)式定義規(guī)則
mobile: [/^1[3-9]\d{9}$/, "請?zhí)顚懹行У氖謾C(jī)號"],
// 使用函數(shù)定義規(guī)則
xxx: function(elem, param) {
return /^1[3458]\d{9}$/.test($(elem).val()) || '請檢查手機(jī)號格式';
}
},
fields: {
// 對字段 username 應(yīng)用規(guī)則 mobile
'username': 'required;mobile'
}
});3. 初始化驗證
(1)、DOM 綁定規(guī)則，無需 JS 代碼
<form id="form1" action="register.php">
<label>Email</label>
<input type="email" name="email" data-rule="required;email">
<label>Password</label>
<input type="password" name="pwd" data-rule="required;length(6~16)">
</form>(2)、JS 配置規(guī)則，無DOM代碼
<form id="form1" action="register.php">
<label>Email</label>
<input type="email" name="email">
<label>Password</label>
<input type="password" name="pwd">
</form>// 初始化驗證
$('#form1').validator({
fields: {
'email': 'required;email',
'pwd': 'required;length(6~16)'
}
});調(diào)用插件方法 .validator()，并使用 fileds 參數(shù)
當(dāng)然，DOM 和 JS 兩種方式也支持同時使用，你也可以通過 DOM 綁定規(guī)則，然后使用 js 初始化。
4. 提交表單
nice-validator 一旦初始化就會阻止表單被提交，直到表單規(guī)則全部驗證通過。
如果傳遞了
valid參數(shù)回調(diào)或者valid.form事件，表單即使驗證通過也不會被提交，而是由valid參數(shù)和valid.form事件接管。然后你需要自己決定如何提交表單。
方式一：點(diǎn)擊提交按鈕，表單驗證通過后自動原生方式提交
<form id="form1" action="register.php">
<label>Email</label>
<input type="email" name="email" data-rule="required;email">
<label>Password</label>
<input type="password" name="pwd" data-rule="required;length(6~16)">
<button type="submit">提交</button>
</form>方式二：使用驗證通過回調(diào)（參考：valid）
$('#form1').validator({
valid: function(form) {
// do something
// use native submit.
form.submit();
}
});示例三：綁定表單驗證通過的事件（參考：valid.form事件）
$('#form1').on('valid.form', function(e){
// You can do something, then submit form by native
// this.submit();
// or use ajax submit
$.post("path/to/server", $(this).serialize())
.done(function(d){
// some code
});
});到此這篇關(guān)于FastAdmin表單驗證data-rule插件—Nice-validator的使用方法的文章就介紹到這了,更多相關(guān)表單驗證data-rule—Nice-validator插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
TypeScript?5.0?正式發(fā)布及使用指南詳解
這篇文章主要為大家介紹了TypeScript?5.0?正式發(fā)布及使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
你可能聽說了這個新MVC框架： CanJS。還有什么比用它來創(chuàng)建一個聯(lián)系人Web App更能深入了解它的辦法呢？當(dāng)看完這篇教程，你將全面了解用它的什么工具來創(chuàng)建你自己的Web App。2014-09-09
TypeScript數(shù)組實現(xiàn)棧與對象實現(xiàn)棧的區(qū)別詳解
這篇文章主要為大家介紹了TypeScript數(shù)組實現(xiàn)棧與對象實現(xiàn)棧的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了TypeScript類型實現(xiàn)加減乘除示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
layui中的layer彈出層有很多提示框，但是我們使用最多的應(yīng)該就幾種，layer.msg、layer.alert、layer.open、layer.load等。layer?有內(nèi)置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不僅允許你傳入layer內(nèi)置的樣式class名，可以自定義class名。2023-06-06
聯(lián)合類型Union?Types與交叉類型Intersection?Types區(qū)別解析
這篇文章主要為大家介紹了聯(lián)合類型Union?Types與交叉類型Intersection?Types區(qū)別詳解2023-06-06
FastAdmin表單驗證data-rule插件—Nice-validator的使用方法
FastAdmin的表單驗證data-rule非常方便,也很炫酷,采用的Nice-validator是一款非常強(qiáng)大的表單驗證插件,通過簡單在元素上配置規(guī)則,即可達(dá)到驗證的效果,怎么使用Nice-validator插件呢2023-09-09
TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程
這篇文章主要為大家介紹了TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
一般情況下web項目的瀏覽器下載文件，都是使用form表單或者ajax向后端提交數(shù)據(jù)，發(fā)送請求，后端文件的URL地址或者二進(jìn)制文件流。這篇文章主要介紹了使用JS?的download庫在瀏覽器直接下載文件。2022-12-12
typescript類型體操及關(guān)鍵字使用示例詳解
這篇文章主要為大家介紹了typescript類型體操及關(guān)鍵字使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11