以ant举个例子
<a-form-model :model="form" layout="inline" :rules="rules"ref="portRuleForm">
</a-form-model>
这里面重要的字段有几个rules
model
ref
现在有个时间框要校验,先写好代码
<a-form-model-item label="基准日期" prop="baseDate"><a-date-picker class="jy-wfull" v-model="form.baseDate" /></a-form-model-item>
这里的model
是form.baseDate
对应上面的model="form"
,所以我们的prop
填baseDate
,注意要校验那个字段,就去写哪个model名字在prop
里
下面描述下规则,这个要写data里面
rules: {baseDate: [{ required: true, message: '请选择时间', trigger: 'change' },]}
这个是简单点的,如果自定义规则
baseDate: [{ required: true, message: '请选择时间'},{ validator: this.validateBaseDate, trigger: 'change' }],
然后我们在methods
里写入方法
validateBaseDate(rule, value, callback) {if(!this.form.XXXX){callback(new Error('请选择时间'));}else{callback();}},
最后是提交的时候加入判断
savePortRule() {this.$refs.portRuleForm.validate((valid) => {if (valid) {XXXX提交到后端}})},
这里的portRuleForm
是最上面a-form-model
里的ref
的值