一、普通的值类型的数据校验
设置 el-form-item 的 prop 值 与 formdata 中定义的 key 保持一致`如果 rules 需要通过 el-form 统一设置,rules 的 key 定义也与 prop 保持一致(如果不一致,需要在 el-form-item 中 手动指定)复杂的校验函数可通过 validator 单独定义
class="demo-form" :model="form" :rules="rules" >
import { Reg_w } from '@/utils/reg'
export default {
data() {
// 数据库表名校验
let validatorSheet = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入数据表名称'))
} else if (!Reg_w(value)) {
callback(new Error('表名称仅支持字母数字下划线组合'))
} else {
callback()
}
}
return {
// 表单数据
form: {
// 数据表名称
sheet: undefined,
// 数据库库名
database: undefined,
},
// 校验规则
rules: {
sheet: [{ required: true, validator: validatorSheet, trigger: 'blur' }],
database: [{ required: true, message: '请输入数据库库名', trigger: 'blur' }],
},
}
},
}
二、表单数据为数组,数组循环中的每个字段需要校验
在上述使用方式的基础上,需要额外注意:
prop 在循环中需要对应到 formdata 中 数组的某一项具体值,可以利用 index 等变量 进行锁定,再取到 具体的keyv-model 结合循环正常使用el-form-item 的 rules 需要 手动指定
class="demo-form" :model="form" :rules="rules" >
export default {
data() {
return {
// 表单数据
form: {
// 表单字段列表
fieldList: [
//内部是这样的格式: { id: 1, field: '字段1', comment: '注释1' }
],
},
// 校验规则
rules: {
field_name: [{ required: true, message: '请输入字段名', trigger: 'blur' }],
field_comment: [{ required: true, message: '请输入字段注释', trigger: 'blur' }],
},
}
},
}
欢迎留言,一起探索更多~
好文推荐
发表评论