iview数字校验的坑点

1.表单校验,单独进行数字校验,使用下面的代码是可以的,

 {type: 'number', message: '请输入数字', trigger: 'blur'}

但同时进行数字和为空校验,使用下面的代码是不行的,输入数字的时候一直提示不能为空

 {required: true, message: '电话号码不能为空', trigger: 'blur'},
 {type: 'number', message: '请输入数字', trigger: 'blur'}

修改方法是:

  1. 设置input的类型为text
<Form-item label="收货电话" prop="deliveryMobile">
 <Input type="text" v-model="form.deliveryMobile" placeholder="请输入" />
</Form-item>
  1. 对number的校验需要自定义,而判空可以使用系统自带的

在data中自定义一个队number的校验

            
            const validateMobile = (rule, value, callback) => {
               
                if (!Number.isInteger(+value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            };

然后在校验的规则处,填写:

  ruleValidate: {
 deliveryMobile: [
                        {required: true, message: '电话号码不能为空', trigger: 'blur'},
                        {validator: validateMobile, trigger: 'blur'}
                    ]
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,080评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,915评论 25 709
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,802评论 18 399
  • “怜儿,你想要一个怎样的夫君?祖奶奶替你找。” 白发苍苍的老者爱怜地抚摸着跪坐在身边的孙女,孙女也大了,到了嫁人的...
    狐则阅读 335评论 0 0
  • 有没有遇到这样的情况无论听音乐还是看电影,音箱会发出一些杂音,甚至什么都不做,只要音箱是开启,也会发出或大或小“吱...
    魅洋圈阅读 38,234评论 0 0