一、普通的值类型的数据校验
- 设置
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>
欢迎留言,一起探索更多~
原文地址:https://blog.csdn.net/weixin_42289080/article/details/130622534
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_7101.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。