1. Rendering
Description: 3 actions, corresponding to 3 validation rules. Action 1: Numeric objects or arrays are acceptable (empty is also acceptable); Action 2: Only array objects can pass validation; Action 3: Numeric types can pass validation
2. Code implementation
(1) template (note that the key value of the cyclic data here must have, otherwise, although the verification is valid, it will not be verified when submitted)
<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
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
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//在上一步清空验证规则后，这里重新赋值，不然数据会有改变（有的需要，有的不需要这一步）
}
}
}
},