美文网首页
iview自定义表单验证

iview自定义表单验证

作者: vueLover | 来源:发表于2017-11-05 20:29 被阅读0次

    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"”。
    
    

    相关文章

      网友评论

          本文标题:iview自定义表单验证

          本文链接:https://www.haomeiwen.com/subject/kkuhmxtx.html