vue中常用的rules驗(yàn)證方式總結(jié)

更新時(shí)間：2024年10月30日 09:22:42 作者：理部尚書(shū)

這篇文章主要為大家詳細(xì)介紹了vue中常用的幾種表單rules驗(yàn)證方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

vue中常用的幾種表單rules驗(yàn)證方式

message：報(bào)錯(cuò)信息

trigger：觸發(fā)方式

1）blur ：失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證

2）change ：當(dāng)值發(fā)生變化時(shí)進(jìn)行驗(yàn)證

required：指定字段是否為必填項(xiàng)（此欄是否為空）

{
    label: "用戶(hù)姓名",
    prop: "UserName",
    type: "input",

    rules: [
        {
            required: true,
            message: '請(qǐng)輸入考核層級(jí)',
            trigger: 'blur',
        }
   ]
}

min/max：用于驗(yàn)證字段的最小值或最大值（適用于字符串長(zhǎng)度或數(shù)字范圍）

{
    label: "用戶(hù)姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        min: 2,
        max: 5,
        message: '字符長(zhǎng)度在2到5之間',
        trigger: 'blur'
    }]
}

type：指定字段的類(lèi)型，如 string, number, boolean, array, date, email, url等

{
    label: "用戶(hù)姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        min: 1,
        max: 100,
        type: 'number',
        message: '請(qǐng)輸入1到100之間的數(shù)字',
        trigger: 'change'
    }]
}

pattern：使用正則表達(dá)式進(jìn)行驗(yàn)證

{
    label: "用戶(hù)姓名",
    prop: "UserName",
    type: "input",

    rules: [{
            pattern: /^[a-zA-Z0-9]+$/,
            message: '只能包含字母和數(shù)字',
            trigger: 'blur'
        }
    ]
}

validator：自定義驗(yàn)證邏輯，提供最大靈活性，可以使用回調(diào)函數(shù)來(lái)處理復(fù)雜的驗(yàn)證邏輯

{
    label: "用戶(hù)姓名",
    prop: "UserName",
    type: "input",

    rules: [{
            validator: (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('輸入不能為空'));
                } else if (!/^\d+$/.test(value)) {
                    callback(new Error('請(qǐng)輸入數(shù)字'));
                } else {
                    callback(); // 驗(yàn)證通過(guò)
                }
            },
            trigger: 'change'
        }

    ]
}

enum：指定枚舉值，用于驗(yàn)證輸入是否在特定值的集合中

{
    label: "用戶(hù)姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        type: 'enum',
        enum: ['option1', 'option2'],
        message: '請(qǐng)選擇有效選項(xiàng)',
        trigger: 'change'
    }]
}

len：驗(yàn)證字段的固定長(zhǎng)度（適用于字符串或數(shù)組）

{
    label: "用戶(hù)姓名",
    prop: "UserName",
    type: "input",

???????    rules: [{
        len: 5,
        message: '請(qǐng)輸入5個(gè)字符',
        trigger: 'blur'
    }]
}

擴(kuò)展：有一個(gè)需求，我需要在監(jiān)視屬性中，增加一個(gè)自定義rules規(guī)則，規(guī)則是判斷兩個(gè)日期是否符合條件，不符合需要返回 ‘日期校驗(yàn)錯(cuò)誤’

到此這篇關(guān)于vue中常用的rules驗(yàn)證方式總結(jié)的文章就介紹到這了,更多相關(guān)vue rules驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: