ElementUi rules表單驗證

xixi發表於2017-12-23
UI

ElementUi 表單驗證

  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-9u4E00-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`},
    ],
},

相關文章