VUE Date类型前端判断动态校验

需求

原本需求

一个编号和一个日期在流程中的审查人节点必填，于是我就直接写了前端必填校验

所有代码和名称已做更改，不涉及到公司隐私

<CustomFormItem label="登记编号" prop="registerNo" v-if="'asset_examiner' == form.node || trueNode=='asset_examiner'">
              <Input v-model="form.registerNo" placeholder=""  style="width:90%" :disabled = "view || 'asset_examiner' != form.node"></Input>
              </CustomFormItem>
<CustomFormItem label="登记日期" prop="registerDate" v-if="'asset_examiner' == form.node || trueNode=='asset_examiner'">
        <DatePicker type="date" v-model="form.registerDate" class="ivu-input6" style="width: 100%"
                     :disabled = "view || 'asset_examiner' != form.node"
                     format="yyyy-MM-dd"></DatePicker>
        </CustomFormItem>

//验证信息
validateRule: {
	registerNo: [
                    {required: true,  pattern: '[^ \x22]+', message: '不能为空', trigger: 'blur'}
                ],
	registerDate: [
                    {required: true, type:'date' ,message: '不能为空', trigger: 'blur'}
                ]
}

pattern: ‘[^ \x22]+’ ：空格校验，不能为空格
如果前端vue 为日期类型的话（type=“date”），校验时也应该设置类型 type:‘date’ ，不然将无效
具体可见：https://blog.csdn.net/weixin_46573158/article/details/120908350?spm=1001.2014.3001.5501

上线

在测试没问题之后上线，上线第一天经理发现少提了个需求，紧急加了一个需求，一小时之内上线：如果是特殊业务类型的话，这两字段就不为必填
我在 js 做判断

registerNo: [
                    {required: false,  pattern: '[^ \x22]+', message: '不能为空', trigger: 'blur'}
                ],
                registerDate: [
                    {required: false,  message: '不能为空', trigger: 'blur'}
                ]

此时把 type:‘date’ 删除是因为设置值在校验前面，已经把值设置为string类型了，再做的校验

this.form.registerNo = res.data.registerNo;
this.form.registerDate = res.data.registerDate != null ? this.$formatDate(res.data.registerDate, 'yyyy-MM-dd') : "";
//审查人节点项目 如果是特殊业务类型的话，编号和日期就不设置为必填
this.form.node = node; //记录当前节点  重新复制当前节点信息
if (this.form.node == 'asset_examiner') {
    if ( (this.public.businessType != null && this.public.businessType == '1-02') ||  (this.public.businessType != null && this.public.businessType == '1-03')) {
                            this.validateRule.registerNo[0].required = false;
                            this.validateRule.registerDate[0].required = false;
   } else {
          this.validateRule.registerNo[0].required = true;
          this.validateRule.registerDate[0].required = true;
     }
} else {
         this.validateRule.registerNo[0].required = false;
         this.validateRule.registerDate[0].required = false;
}

出大问题

有人开始反馈自己日期填写了值但是还是有非空校验，编号没有问题，那就是日期的校验设置有问题。为了不影响投放流程走下去，我们先暂时把校验放开打了一版上去。

解决问题

编号没有问题，日期有问题，显然就是date类型设置校验的时候跟string不同。经过一番讨论，最后得出：
先不设置校验，然后当只有在审查人节点并且不是特殊业务类型才添加校验，并且把赋值放在校验之后，先校验，再赋值（因为如果是同一合同多次放款会自动带出第一次放款时填的值）

 // registerDate: [
//     {required: false,  message: '不能为空', trigger: 'blur'}
// ]
registerDate: []

this.form.node = node; //记录当前节点  重新复制当前节点信息
                    if (this.form.node == 'asset_examiner') {
                        if ( (this.public.businessType != null && this.public.businessType == '1-02') ||  (this.public.businessType != null && this.public.businessType == '1-03')) {
                            this.validateRule.registerNo[0].required = false;
                        } else {
                            this.validateRule.registerNo[0].required = true;
                            this.validateRule.registerDate = [];
                            //只有在审查人节点并且不是特殊业务类型才添加校验
                            this.validateRule.registerDate.push(
                                {required: true, type:'date', message: '不能为空', trigger: 'change'}
                            );
                        }
                    }
                    this.form.registerNo = res.data.registerNo;
                    this.form.registerDate = res.data.registerDate != null ? this.$formatDate(res.data.registerDate, 'yyyy-MM-dd') : "";

总结

前端js设置动态判断校验时,
String类型：

this.validateRule.registerNo[0].required = false;

Date类型：

//先清空校验，防止有值
this.validateRule.registerDate = [];
this.validateRule.registerDate.push(
       {required: true, type:'date', message: '不能为空', trigger: 'change'}
);

学习

前端push() 相当于 Java：add()