ElementUi rules表單驗證

ElementUi 表單驗證

工作中常用到的JS驗證

1. 可以在pattern中書寫正則，並且配合elementUI進行表單驗證。
2. pattern 屬性規定用於驗證輸入字段的模式。模式指的是正則表達式。

rules: {
    name:[{
        required: true,
        message: '請輸入用戶名',
        trigger: 'blur'
        },{
        min: 2,
        max: 5,
        message: '長度在 2 到 5 個字符'
        },{
        pattern: /^[\u4E00-\u9FA5]+$/,
        message: '用戶名只能為中文'
    }
        //{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母開頭，長度在2-5之間， 只能包含字符、數字和下划線'}
    ],
    password: [{
        required: true,
        message: '請輸入密碼',
        trigger: 'blur'
    }, {
        min: 6,
        max: 30,
        message: '長度在 6 到 30 個字符'
    }, {
        pattern: /^(\w){6,20}$/,
        message: '只能輸入6-20個字母、數字、下划線'
    }],
    mobile:[{ 
        required: true,
        message: '請輸入手機號碼',
        trigger: 'blur'
    },
    {validator:function(rule,value,callback){
            if(/^1[34578]\d{9}$/.test(value) == false){
                callback(new Error("請輸入正確的手機號"));
            }else{
                callback();
            }
        }, trigger: 'blur'}
    ],
    //   pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }
    peopleID:[{
        required: true,
        message: '請輸入身份證ID',
        trigger: 'blur'
        },{
           pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份證格式不正確' 
        }
    ],
    carId:[
        {required: true, message: '請輸入車牌號', trigger: 'blur'}, 
        {pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[掛學警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學警軍港澳]{1}$)/,
         message: '常規格式：晉B12345'},
    ],
},

原文地址：https://segmentfault.com/a/1190000012551362