一、普通的值类型的数据校验
①设置 el-form-item 的 prop 值 与 formdata 中定义的 key 保持一致`
②如果 rules 需要通过 el-form 统一设置,rules 的 key 定义也与 prop 保持一致(如果不一致,需要在 el-form-item 中 手动指定)
③复杂的校验函数可通过 validator 单独定义
<el-form class="demo-form" :model="form" :rules="rules" > <el-form-item label="数据库库名:" prop="database"> <el-input v-model="form.database" placeholder="请输入数据库库名"> </el-input> </el-form-item> <el-form-item label="数据表名称:" prop="sheet"> <el-input v-model="form.sheet" placeholder="请输入数据表名称"> </el-input> </el-form-item> </el-form> <script> 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' }], }, } }, } </script>
二、表单数据为数组,数组循环中的每个字段需要校验
在上述使用方式的基础上,需要额外注意:
①prop 在循环中需要对应到 formdata 中 数组的某一项具体值,可以利用 index 等变量 进行锁定,再取到 具体的key
②v-model 结合循环正常使用
③el-form-item 的 rules 需要 手动指定
<el-form class="demo-form" :model="form" :rules="rules" > <div v-for="(item, index) in form.fieldList" :key="item.id" class="sheet-item"> <!-- 字段名称 --> <el-form-item :prop="`fieldList[${index}][field]`" :rules="rules.field_name"> <el-input v-model="item.field" placeholder="请输入字段名"> </el-input> </el-form-item> <!-- 字段注释 --> <el-form-item :prop="`fieldList[${index}][comment]`" :rules="rules.field_comment"> <el-input v-model="item.comment" placeholder="请输入字段注释"> </el-input> </el-form-item> </div> </el-form> <script> 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' }], }, } }, } </script>
标签:el,form,elementUI,rules,校验,表单,blur From: https://www.cnblogs.com/btsn/p/18104342