1. レンダリング
説明: 3 つの検証ルールに対応する 3 つのアクション、アクション 1: 数値オブジェクトまたは配列 (空または空) のいずれか; アクション 2: 配列オブジェクトのみが検証に合格できる; アクション 3: 数値型は検証に合格できる
2. コードの実装
(1) テンプレート (ここでの循環データのキー値は必須であることに注意してください。そうでない場合、検証は有効ですが、送信時に検証されません)
<Select v-model="nodeForm.actions" placeholder="请选择动作">
<Option
v-for="item in loopTypeList"
:label="item.name"
:value="item.value"
>{
{
item.name }}
</Option>
</Select>
</FormItem>
<FormItem label="循环数据" prop="text" key="text" v-if="nodeForm.actions" :rules="{ required: true,validator:validateType, trigger: 'change'}">
//<!-- <InputNumber :min="0" v-model="nodeForm.text" v-if="nodeForm.actions=='3'"/>-->
<Input v-model="nodeForm.text" placeholder="请输入大于0的数据" type="number" v-if="nodeForm.actions=='3'"></Input>
<Input v-model="nodeForm.text" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入JSON数组格式数据" type="textarea" v-else></Input>
</FormItem>
(2)方法
methods: {
//验证for表单规则
validateType(rule, value, callback) {
if(this.nodeForm.actions=='3'){
let numReg = /^[0-9]*$/
let numRe = new RegExp(numReg)
if (numRe.test(value) && value>0 ) {
callback();
}else{
callback(new Error('请输入大于0的数字'));
}
}else if(this.nodeForm.actions=='1'){
try {
if(JSON.parse(value) && typeof JSON.parse(value)=='object'){
callback()
}else{
callback(new Error('请输入数组格式或JSON数组格式数据'))
}
} catch (error) {
callback(new Error('请输入数组格式或JSON数组格式数据'))
}
}else if(this.nodeForm.actions=='2'){
try {
if(JSON.parse(value) && typeof JSON.parse(value)=='object'){
if(JSON.parse(value).length>0){
let arr=JSON.parse(value)
arr.forEach(item=>{
if(typeof item=='object'){
callback()
}else{
callback(new Error('请输入JSON数组格式数据'))
}
})
}
callback()
}else{
callback(new Error('请输入JSON数组格式数据'))
}
} catch (error) {
callback(new Error('请输入JSON数组格式数据'))
}
}
},
}
(3)見る
watch: {
'nodeForm.actions'(){
if(this.editTitle== 'FOR 控制器'){
this.$refs['nodeForm'].resetFields() //清空验证规则，不然在切换时会提示错误
if(this.nodeForm.text&&this.nodeForm.data.text){
this.nodeForm.text=this.nodeForm.data.text//在上一步清空验证规则后，这里重新赋值，不然数据会有改变（有的需要，有的不需要这一步）
}
}
}
},