关于a-form-model-item的校验问题踩坑
关于a-form-model-item表单校验方式对于vue,使用的比较多的方式为官方给出的在整个表单外部<a-form-model :rules="rules">在每个设置好prop的值,这样整个表单就能对相应的item项进行自动绑定校验<a-form-model-item prop="ruleName">对于校验规则,vue2的用data()中设置data(){cons
关于a-form-model-item表单校验方式
对于vue,使用的比较多的方式为官方给出的
在整个表单外部
<a-form-model :rules="rules">
在每个设置好prop的值,这样整个表单就能对相应的item项进行自动绑定校验
<a-form-model-item prop="ruleName">
对于校验规则,vue2的用data()中设置
data(){
const checkPerformanceSpec = (rule, value, callback) => {
//放上校验的代码
if (optionTure) {
callback()
} else {
callback(new Error('订购时间必须选择'))
}
}
return {
rules:{
ruleName: [{ validator: checkPerformanceSpec, trigger: ['blur', 'change'] }]
//自定义校验规则
ruleName1: [{ required: true, message: '请选择', trigger: 'change' }]
//第二种方式
//第三可以结合一起用
}
}
}
vue3.x得去Ant Design Vue中去看咋写
一般的不复杂的情况都能通过上边的解决
异常情况处理:
要监听的表单域不满足自动监听的条件,可以通过如下方式关联表单域:
第一种情况.在这种一个item里嵌套好几个input 的情况
解决方法antd vue的官网上给出了,亲测有效
这里贴出官方给的方法以及解释:
Form.Item 会对唯一子元素进行劫持,并监听 blur
和 change
事件,来达到自动校验的目的,所以请确保表单域没有其它元素包裹。如果有多个子元素,将只会监听第一个子元素的变化。
如果要监听的表单域不满足自动监听的条件,可以通过如下方式关联表单域:
<a-form-model-item prop="form.name" ref="name" :autoLink="false">
<a-input v-model="other" />
<span>hahha</span>
<div>
<a-input
v-model="form.name"
@blur="() => {$refs.name.onFieldBlur()}"
@change="() => {$refs.name.onFieldChange()}"
/>
</div>
</a-form-model-item>
注意:
在我代码中,这里的 autoLink我没有使用,也是可以的。
另外,定义的规则一般是用第一种或者第三种
个人理解,就是给外部的item加上ref,内部input通过动作改变ref。
异常情况2:
在一个item中加上一个可选择的table
这种情况,需要对异常处理1的做法进行进一步修改
具体处理方式:
1.rule的定义采用第一种方式
2.table的rowselection需要进行修改
<a-table
:row-selection="rowSelection"
:columns="columns"
:data-source="data"/>
改为
rowSelection: {
type: 'radio',
// onChange: (e) => { //onChange与onSelect用一个就行,他们的e的值是不同的
// this.onrowSelectChange(e)
// },
onSelect: (e) => {
this.onrowSelectChange(e)
}
},
methods:{
onrowSelectChange(value) {
const ref = this.$refs.performanceSpecA
ref && ref.onFieldChange()
},
}
如果要做赋值和计算操作,并且在校验的时候会用到该值,
请在ref改变之前进行操作。不然rule校验会先一步进行,会导致校验出错或者出现永远慢一步的情况
网上 还有别的类似方式,
如:
<div class="flex-row">
<el-form-item label="加班标准" required>
<div class="flex-row">
<el-form-item prop="overtime1">
<el-input v-model="form.overtime1"></el-input>
</el-form-item>
<el-form-item prop="overtime2">
<el-input v-model="form.overtime2"></el-input>
</el-form-item>
</div>
</el-form-item>
</div>
该方法时el-form-item表单中使用,不知道对于我们的a-form-model-item是否可行
更多推荐
所有评论(0)