vue表单校验json数组格式和普通数组格式数据

1、效果图

说明：3种动作，对应3种验证规则，动作1：数字对象或数组均可（空也可）；动作2：只有数组对象可通过验证；动作3：数字类型可通过验证

2、代码实现

（1）template（注意这里的循环数据的key值必须有，否则虽然验证有效，但是提交时不会进行验证）

                <Select v-model="nodeForm.actions" placeholder="请选择动作"><Optionv-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//在上一步清空验证规则后，这里重新赋值，不然数据会有改变（有的需要，有的不需要这一步）}}}},

vue表单校验json数组格式和普通数组格式数据相关推荐

vue表单校验一直不通过
el-form表单校验需要注意的地方,很容易出现问题而发现不了 el-form 的model属性和ref属性的值不要求一定相同,它们可以不一样,但是model属性的值一定是一个对象,且el-form- ...
vue表单校验，根据某选项追加或去掉校验
这是自己随便写的小测试,包括字段名取得都乱七八糟,敬请谅解. 需求根据状态这个下拉框数据来判断经办人和日期是否需要校验, 状态值为在职时校验, 状态值为离职时不校验. 实现代码 1.表单 (正常校验 ...
vue表单校验之bluer，change
今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是selec ...
VUE表单校验，金额
rules: {money: [{ required: true, message: '请输入金额', trigger: 'blur' },{pattern: /^(([1-9]{1}\d{0,9}) ...
vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
点击右上方红色按钮关注"web秀",让你真正秀起来前言表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单 ...
vue 数组中嵌套数组_vue+element-ui表单校验之数组多层嵌套
表单校验两层数组嵌套 :prop="'collectKidDtoList.'+index+'.collectKid.'+i+'.collectCode'" :rules=" ...
问卷调查：vue element动态生成表单、表单校验以及表单提交
有任何疑问和问题欢迎大家提出来,一起学习,相互监督,共同进步! 需求:题型包含:单选题.多选题.文本框.矩阵题型实现功能的相关技术:vue(router,axios,element-ui) 实现结果 ...
vue如何制作自定义表单校验样式
vue如何制作自定义表单校验样式先上效果图由于vue的优越性,所以衍生出很多与之匹配并非常受欢迎的ui组件库,比如最常见的element-ui和antvue,两者内容几乎相同,样式略有差异,所以在 ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...

vue表单校验json数组格式和普通数组格式数据

1、效果图

2、代码实现

vue表单校验json数组格式和普通数组格式数据相关推荐

最新文章

热门文章