iview自定义表单验证

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和vue写的时候就更不好搞了,之前用...
    Raalstalblack阅读 7,567评论 0 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,002评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • “奔溃应该比较容易吧。” 再也很少用耳机去听歌,准确地说,是很少再认真安静地去听一首歌。 曾也是一天到晚耳机不离耳...
    汐漾_阅读 330评论 0 0
  • 我相信,一定有人和我一样,喜欢在闲暇时一边又一遍的刷《老友记》。 初闻《老友记》是在在英语课上,老师推荐学习口语。...
    洋葱晶晶阅读 505评论 0 3