腳本之家服務(wù)器常用軟件

快捷導航

FastAdmin表單驗證data-rule插件—Nice-validator的使用方法

更新時間：2023年09月23日 11:31:07 投稿：yin

FastAdmin的表單驗證data-rule非常方便,也很炫酷,采用的Nice-validator是一款非常強大的表單驗證插件,通過簡單在元素上配置規(guī)則,即可達到驗證的效果,怎么使用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 - 當前字段與另一個字段比較
remote - 獲取服務(wù)器端驗證的結(jié)果
integer - 只能填寫整數(shù)
range - 只能填寫指定范圍的數(shù)
length - 字段值必須符合指定長度
filter - 過濾當前字段的值，不做驗證

自定義規(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號"],
        chinese: [/^[\u0391-\uFFE5]+$/, "請?zhí)顚懼形淖址?]
    }
});

示例：通過 DOM 方式自定義規(guī)則（只對當前字段有效）

<input name="demo" data-rule="required; xxx" data-rule-xxx="[/^\d{6}$/, '請輸入6位數(shù)字']">

示例：通過 rules 配置規(guī)則（當前表單實例有效）

$('#form1').validator({
    rules: {
        // 使用正則表達式定義規(guī)則
        mobile: [/^1[3-9]\d{9}$/, "請?zhí)顚懹行У氖謾C號"],
        // 使用函數(shù)定義規(guī)則
        xxx: function(elem, param) {
            return /^1[3458]\d{9}$/.test($(elem).val()) || '請檢查手機號格式'; 
        }
    },
    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ù)

當然，DOM 和 JS 兩種方式也支持同時使用，你也可以通過 DOM 綁定規(guī)則，然后使用 js 初始化。

4. 提交表單

nice-validator 一旦初始化就會阻止表單被提交，直到表單規(guī)則全部驗證通過。

如果傳遞了valid參數(shù)回調(diào)或者valid.form事件，表單即使驗證通過也不會被提交，而是由valid參數(shù)和valid.form事件接管。然后你需要自己決定如何提交表單。

方式一：點擊提交按鈕，表單驗證通過后自動原生方式提交

<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)文章希望大家以后多多支持腳本之家！

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

FastAdmin表單驗證data-rule插件—Nice-validator的使用方法

目錄

1. 加載插件

(1)、直接引用

(2)、通過 RequireJS 模塊系統(tǒng)

2. 了解規(guī)則

(1)、規(guī)則語句中的符號：

(2)、配置規(guī)則

(3)、內(nèi)置規(guī)則

(4)、自定義規(guī)則

3. 初始化驗證

(1)、DOM 綁定規(guī)則，無需 JS 代碼

(2)、JS 配置規(guī)則，無DOM代碼

4. 提交表單

方式一：點擊提交按鈕，表單驗證通過后自動原生方式提交

方式二：使用驗證通過回調(diào)（參考：valid）

示例三：綁定表單驗證通過的事件（參考：valid.form事件）

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

FastAdmin表單驗證data-rule插件—Nice-validator的使用方法

目錄

1. 加載插件

(1)、直接引用

(2)、通過 RequireJS 模塊系統(tǒng)

2. 了解規(guī)則

(1)、規(guī)則語句中的符號：

(2)、配置規(guī)則

(3)、內(nèi)置規(guī)則

(4)、自定義規(guī)則

3. 初始化驗證

(1)、DOM 綁定規(guī)則，無需 JS 代碼

(2)、JS 配置規(guī)則，無DOM代碼

4. 提交表單

方式一：點擊提交按鈕，表單驗證通過后自動原生方式提交

方式二：使用驗證通過回調(diào)（參考：valid）

示例三：綁定表單驗證通過的事件（參考：valid.form事件）

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

(2)、通過 RequireJS 模塊系統(tǒng)

(1)、規(guī)則語句中的符號：

(2)、配置規(guī)則

(3)、內(nèi)置規(guī)則

(4)、自定義規(guī)則

(1)、DOM 綁定規(guī)則，無需 JS 代碼

(2)、JS 配置規(guī)則，無DOM代碼

方式一：點擊提交按鈕，表單驗證通過后自動原生方式提交