记录-iview表格引起的校验bug

1.需求描述:

        有一个Form表单需要进行校验,其中一个变量会根据前置条件的不同而进行组件的变化,然后在新增或者编辑保存的时候,需要对它们进行非空校验。


2.问题描述:

        1.由于这个变量根据条件绑定了两个组件,一个是InputNumber(数字整型),一个是DatePicker(日期Date),所以导致它们在校验的时候会出现问题。

        2.若给inputNumber设定type="number",给DataPicker设定type=“date”的话。当类型不匹配的时候DataPicker会进入转圈状态,导致无法保存。

        ps:form表单校验的时候会同时校验formItem的值以及数据类型,默认为string类型的,若类型不匹配的话也会进行非空提示。

3.实现思路:

       思路1:当一个变量根据条件绑定了多个组件并需要进行非空判定或者校验等,通过form表单中的自定义校验去进行处理。

        思路2:或者给formItem设置type="date"(使用此方式进行处理的话,编辑的时候数据类型一定要用 new Date() 转换成时间格式才行)


4.最终代码:

// 思路1:自定义校验 
export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true,validator:this.validateTime,message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                }
            }
        },
        methods:{
            // 自定义校验
            validateTime(rule,value,callback){
                if(value === "") {
                    return callback(new Error("时间不能为空"));
                } else {
                    callback();
                }
            }
        }
}

// 思路2:formItem设置type类型

     date: [
   { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }],
     time: [{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }],

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值