vue中常用的rules驗證方式總結

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

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

vue中常用的幾種表單rules驗證方式

message：報錯信息

trigger：觸發(fā)方式

1）blur ：失去焦點時進行驗證

2）change ：當值發(fā)生變化時進行驗證

required：指定字段是否為必填項（此欄是否為空）

{
    label: "用戶姓名",
    prop: "UserName",
    type: "input",

    rules: [
        {
            required: true,
            message: '請輸入考核層級',
            trigger: 'blur',
        }
   ]
}

min/max：用于驗證字段的最小值或最大值（適用于字符串長度或數字范圍）

{
    label: "用戶姓名",
    prop: "UserName",
    type: "input",

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

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

{
    label: "用戶姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        min: 1,
        max: 100,
        type: 'number',
        message: '請輸入1到100之間的數字',
        trigger: 'change'
    }]
}

pattern：使用正則表達式進行驗證

{
    label: "用戶姓名",
    prop: "UserName",
    type: "input",

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

validator：自定義驗證邏輯，提供最大靈活性，可以使用回調函數來處理復雜的驗證邏輯

{
    label: "用戶姓名",
    prop: "UserName",
    type: "input",

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

    ]
}

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

{
    label: "用戶姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        type: 'enum',
        enum: ['option1', 'option2'],
        message: '請選擇有效選項',
        trigger: 'change'
    }]
}

len：驗證字段的固定長度（適用于字符串或數組）

{
    label: "用戶姓名",
    prop: "UserName",
    type: "input",

???????    rules: [{
        len: 5,
        message: '請輸入5個字符',
        trigger: 'blur'
    }]
}

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

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

您可能感興趣的文章: