首页 >> js开发 >> jsvue + el-form 实现的多层循环表单验证js大全
jsvue + el-form 实现的多层循环表单验证js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
htmlhtml
:label="'字段名称:'"
label-width="90px"
:rules="rules.fieldName"
:prop="'formDictExtendDoList.'+index+'.fieldName'"
>
v-model.trim="formItem.fieldName"
type="text"
:clearable="true"
maxLength="100"
placeholder="请输入"
/>
v-for="(child, index1) in formItem.item"
v-show="formItem.type === 2"
>
:label="'选项' + (index1+1) + ':'"
label-width="90px"
:rules="rules.value"
:prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
>
v-model.trim="child.value"
@input="forceUpdate"
:clearable="true"
type="text"
maxlength="20"
placeholder="请输入"
/>
:label="'字段名称:'"
label-width="90px"
:rules="rules.fieldName"
:prop="'formDictExtendDoList.'+index+'.fieldName'"
>
v-model.trim="formItem.fieldName"
type="text"
:clearable="true"
maxLength="100"
placeholder="请输入"
/>
v-for="(child, index1) in formItem.item"
v-show="formItem.type === 2"
>
:label="'选项' + (index1+1) + ':'"
label-width="90px"
:rules="rules.value"
:prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
>
v-model.trim="child.value"
@input="forceUpdate"
:clearable="true"
type="text"
maxlength="20"
placeholder="请输入"
/>
jsjs
let _THAT
export
default {
name: 'formMangeAdd',
data() {
return {
formObj: {
formDictExtendDoList: []
},
rules: {
fieldName: [{
required: true,
message: '请输入',
trigger: 'blur'
}, {
validator: this.itemValidator,
trigger: 'blur'
}],
value: [{
validator: (rule, value, callback) = > {
// I'm a genius.
let that = _THAT
that.forceUpdate()
let field = rule.field
let arr = field.split('.')
let index = +arr[1]
let index1 = +arr[3]
let _value = that.formObj.formDictExtendDoList[index].item[index1].value
if (_value === '' || _value === null || _value === undefined) {
callback(new Error('请输入'))
} else {
callback()
}
},
trigger: 'blur'
}]
}
}
},
beforeCreate() {
_THAT = this
},
created() {
// 测试数据
let test = [{
id: 'id_1595641858891',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858892',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858893',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: [{
id: 'item_id_1595641858891',
// 唯一id
value: '选项1'
}, {
id: 'item_id_1595641858892',
// 唯一id
value: '选项2'
}]
}]
this.formObj.formDictExtendDoList = test
},
methods: {
/**
* 重复性判断
**/
itemValidator: (rule, value, callback) = > {
let that = _THAT
that.forceUpdate()
let field = rule.field
let ruleArr = field.split('.')
let index = +ruleArr[1]
let type = ruleArr[2]
if (value === '') {
callback()
return false
}
let arr = []
for (let i = 0; i < that.formObj.formDictExtendDoList.length; i++) {
let formDictExtendDoListItem = that.formObj.formDictExtendDoList[i]
let formDictExtendDoListFieldName = formDictExtendDoListItem.fieldName
let formDictExtendDoListProjectName = formDictExtendDoListItem.projectName
if (index !== i) {
if (type === 'fieldName') {
if (formDictExtendDoListFieldName !== '') {
if (formDictExtendDoListFieldName === value) {
arr.push(i)
}
}
}
}
}
if (arr.length !== 0) {
if (type === 'fieldName') {
callback(new Error('与配置' + (+arr[0] + 1) + '的字段名称重复'))
setTimeout(function() {
that.formObj.formDictExtendDoList[index].fieldName = ''
}, 500)
}
} else {
callback()
}
},
forceUpdate() {
this.$forceUpdate()
}
}
}
let _THAT
export
default {
name: 'formMangeAdd',
data() {
return {
formObj: {
formDictExtendDoList: []
},
rules: {
fieldName: [{
required: true,
message: '请输入',
trigger: 'blur'
}, {
validator: this.itemValidator,
trigger: 'blur'
}],
value: [{
validator: (rule, value, callback) = > {
// I'm a genius.
let that = _THAT
that.forceUpdate()
let field = rule.field
let arr = field.split('.')
let index = +arr[1]
let index1 = +arr[3]
let _value = that.formObj.formDictExtendDoList[index].item[index1].value
if (_value === '' || _value === null || _value === undefined) {
callback(new Error('请输入'))
} else {
callback()
}
},
trigger: 'blur'
}]
}
}
},
beforeCreate() {
_THAT = this
},
created() {
// 测试数据
let test = [{
id: 'id_1595641858891',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858892',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858893',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: [{
id: 'item_id_1595641858891',
// 唯一id
value: '选项1'
}, {
id: 'item_id_1595641858892',
// 唯一id
value: '选项2'
}]
}]
this.formObj.formDictExtendDoList = test
},
methods: {
/**
* 重复性判断
**/
itemValidator: (rule, value, callback) = > {
let that = _THAT
that.forceUpdate()
let field = rule.field
let ruleArr = field.split('.')
let index = +ruleArr[1]
let type = ruleArr[2]
if (value === '') {
callback()
return false
}
let arr = []
for (let i = 0; i < that.formObj.formDictExtendDoList.length; i++) {
let formDictExtendDoListItem = that.formObj.formDictExtendDoList[i]
let formDictExtendDoListFieldName = formDictExtendDoListItem.fieldName
let formDictExtendDoListProjectName = formDictExtendDoListItem.projectName
if (index !== i) {
if (type === 'fieldName') {
if (formDictExtendDoListFieldName !== '') {
if (formDictExtendDoListFieldName === value) {
arr.push(i)
}
}
}
}
}
if (arr.length !== 0) {
if (type === 'fieldName') {
callback(new Error('与配置' + (+arr[0] + 1) + '的字段名称重复'))
setTimeout(function() {
that.formObj.formDictExtendDoList[index].fieldName = ''
}, 500)
}
} else {
callback()
}
},
forceUpdate() {
this.$forceUpdate()
}
}
}以上就是vue + el-form 实现的多层循环表单验证的详细内容,关于vue 表单验证的资料请关注其它相关文章!
:label="'字段名称:'"
label-width="90px"
:rules="rules.fieldName"
:prop="'formDictExtendDoList.'+index+'.fieldName'"
>
v-model.trim="formItem.fieldName"
type="text"
:clearable="true"
maxLength="100"
placeholder="请输入"
/>
v-for="(child, index1) in formItem.item"
v-show="formItem.type === 2"
>
:label="'选项' + (index1+1) + ':'"
label-width="90px"
:rules="rules.value"
:prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
>
v-model.trim="child.value"
@input="forceUpdate"
:clearable="true"
type="text"
maxlength="20"
placeholder="请输入"
/>
:label="'字段名称:'"
label-width="90px"
:rules="rules.fieldName"
:prop="'formDictExtendDoList.'+index+'.fieldName'"
>
v-model.trim="formItem.fieldName"
type="text"
:clearable="true"
maxLength="100"
placeholder="请输入"
/>
v-for="(child, index1) in formItem.item"
v-show="formItem.type === 2"
>
:label="'选项' + (index1+1) + ':'"
label-width="90px"
:rules="rules.value"
:prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
>
v-model.trim="child.value"
@input="forceUpdate"
:clearable="true"
type="text"
maxlength="20"
placeholder="请输入"
/>
let _THAT
export
default {
name: 'formMangeAdd',
data() {
return {
formObj: {
formDictExtendDoList: []
},
rules: {
fieldName: [{
required: true,
message: '请输入',
trigger: 'blur'
}, {
validator: this.itemValidator,
trigger: 'blur'
}],
value: [{
validator: (rule, value, callback) = > {
// I'm a genius.
let that = _THAT
that.forceUpdate()
let field = rule.field
let arr = field.split('.')
let index = +arr[1]
let index1 = +arr[3]
let _value = that.formObj.formDictExtendDoList[index].item[index1].value
if (_value === '' || _value === null || _value === undefined) {
callback(new Error('请输入'))
} else {
callback()
}
},
trigger: 'blur'
}]
}
}
},
beforeCreate() {
_THAT = this
},
created() {
// 测试数据
let test = [{
id: 'id_1595641858891',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858892',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858893',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: [{
id: 'item_id_1595641858891',
// 唯一id
value: '选项1'
}, {
id: 'item_id_1595641858892',
// 唯一id
value: '选项2'
}]
}]
this.formObj.formDictExtendDoList = test
},
methods: {
/**
* 重复性判断
**/
itemValidator: (rule, value, callback) = > {
let that = _THAT
that.forceUpdate()
let field = rule.field
let ruleArr = field.split('.')
let index = +ruleArr[1]
let type = ruleArr[2]
if (value === '') {
callback()
return false
}
let arr = []
for (let i = 0; i < that.formObj.formDictExtendDoList.length; i++) {
let formDictExtendDoListItem = that.formObj.formDictExtendDoList[i]
let formDictExtendDoListFieldName = formDictExtendDoListItem.fieldName
let formDictExtendDoListProjectName = formDictExtendDoListItem.projectName
if (index !== i) {
if (type === 'fieldName') {
if (formDictExtendDoListFieldName !== '') {
if (formDictExtendDoListFieldName === value) {
arr.push(i)
}
}
}
}
}
if (arr.length !== 0) {
if (type === 'fieldName') {
callback(new Error('与配置' + (+arr[0] + 1) + '的字段名称重复'))
setTimeout(function() {
that.formObj.formDictExtendDoList[index].fieldName = ''
}, 500)
}
} else {
callback()
}
},
forceUpdate() {
this.$forceUpdate()
}
}
}
let _THAT
export
default {
name: 'formMangeAdd',
data() {
return {
formObj: {
formDictExtendDoList: []
},
rules: {
fieldName: [{
required: true,
message: '请输入',
trigger: 'blur'
}, {
validator: this.itemValidator,
trigger: 'blur'
}],
value: [{
validator: (rule, value, callback) = > {
// I'm a genius.
let that = _THAT
that.forceUpdate()
let field = rule.field
let arr = field.split('.')
let index = +arr[1]
let index1 = +arr[3]
let _value = that.formObj.formDictExtendDoList[index].item[index1].value
if (_value === '' || _value === null || _value === undefined) {
callback(new Error('请输入'))
} else {
callback()
}
},
trigger: 'blur'
}]
}
}
},
beforeCreate() {
_THAT = this
},
created() {
// 测试数据
let test = [{
id: 'id_1595641858891',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858892',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: []
}, {
id: 'id_1595641858893',
// 唯一配置id
fieldName: '字段名称',
// 字段名称
item: [{
id: 'item_id_1595641858891',
// 唯一id
value: '选项1'
}, {
id: 'item_id_1595641858892',
// 唯一id
value: '选项2'
}]
}]
this.formObj.formDictExtendDoList = test
},
methods: {
/**
* 重复性判断
**/
itemValidator: (rule, value, callback) = > {
let that = _THAT
that.forceUpdate()
let field = rule.field
let ruleArr = field.split('.')
let index = +ruleArr[1]
let type = ruleArr[2]
if (value === '') {
callback()
return false
}
let arr = []
for (let i = 0; i < that.formObj.formDictExtendDoList.length; i++) {
let formDictExtendDoListItem = that.formObj.formDictExtendDoList[i]
let formDictExtendDoListFieldName = formDictExtendDoListItem.fieldName
let formDictExtendDoListProjectName = formDictExtendDoListItem.projectName
if (index !== i) {
if (type === 'fieldName') {
if (formDictExtendDoListFieldName !== '') {
if (formDictExtendDoListFieldName === value) {
arr.push(i)
}
}
}
}
}
if (arr.length !== 0) {
if (type === 'fieldName') {
callback(new Error('与配置' + (+arr[0] + 1) + '的字段名称重复'))
setTimeout(function() {
that.formObj.formDictExtendDoList[index].fieldName = ''
}, 500)
}
} else {
callback()
}
},
forceUpdate() {
this.$forceUpdate()
}
}
}以上就是vue + el-form 实现的多层循环表单验证的详细内容,关于vue 表单验证的资料请关注其它相关文章!
相关文章:
- jsVue router安装及使用方法解析js大全
- js代码JavaScript 如何在浏览器中使用摄像头
- jsvue基于Echarts的拖拽数据可视化功能实现js大全
- jsvue表单验证之禁止input输入框输入空格js大全
- js代码在实例中重学JavaScript事件循环
- js如何正确解决VuePress本地访问出现资源报错404的问题js大全
- js代码javascript中导出与导入实现模块化管理教程
- js代码JavaScript中条件语句的优化技巧总结
- jsJavascript新手入门之字符串拼接与变量的应用js大全
- JavaScript解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题