需求

原本需求

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

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

//验证信息
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()