iview自定义表单验证

2017-11-05  本文已影响0人  vueLover

iview表单支持自定义验证规则,可以完成更复杂的验证,下面以验证手机号为例,说明使用方法:

//在组件的data里 声明验证规则:

const validatePhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('手机号不能为空'));
    } else if (!/^1[34578]\d{9}$/.test(value)) {
        callback('手机号格式不正确');
    } else {
        callback();
    }   
};

//在表单验证规则里使用
ruleValidate:{
    phone:[{validator:validatePhone,trigger:'blur'}]
}

//注意:表单添加校验时,需要给 Form 设置属性 rules,即  “:rules="ruleValidate"”,
同时给需要验证的 FormItem 设置属性 prop 指向对应字段,即 “:prop="phone"”。

上一篇 下一篇

猜你喜欢

热点阅读