elementUI 自定义表单数组校验

该代码段展示了一个使用Vue.js的el-dialog组件创建的对话框,包含动态生成的表单元素,每个都有自己的验证规则。用户输入的数据在el-form中进行双向绑定,并在取消或保存操作时触发相应的回调函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<el-dialog
                :title="title"
                :visible.sync="visable"
                width="40%"
                :before-close="cancel">
            <el-form label-width="80px" :model="formData" :rules="formDataRules" ref="formData" >
                <el-form-item label="Id" prop="id" v-if="formData.id">
                    {{formData.id}}
                </el-form-item>

                // begin ---------------------
                <div v-for="(item, index) in formData.test" :key="index">
                    <el-form-item label="test1" :prop="`test[${index}].test1`" :rules="{ required: true, message: '请输入test1', trigger: 'blur' }">
                        <el-input type="text" v-model="item.test1"></el-input>
                    </el-form-item>
                    <el-form-item label="test2" :prop="`test[${index}].test2`" :rules="{ required: true, message: '请输入test2', trigger: 'blur' }">
                        <el-input type="text" v-model="item.test2"></el-input>
                    </el-form-item>
                </div>
         // end ---------------------

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save('formData')">确 定</el-button>
            </div>
        </el-dialog>

### 关于 `el-form` 的 `rules` 属性及其类型 在 Element UI 中,`el-form` 组件提供了内置的表单验证功能,其中 `rules` 是一个非常重要的属性。它用于定义表单项的校验规则,这些规则决定了输入数据的有效性和合法性。 #### 1. **`rules` 属性的作用** `rules` 属性是一个对象,其键对应的是表单域的字段名(即绑定到 `v-model` 或 `modelValue` 上的数据),而值则是一组具体的校验规则数组。每条规则可以指定不同的校验条件,比如必填项、长度限制、正则表达式匹配等[^3]。 #### 2. **`rules` 类型结构** 以下是 `rules` 属性的标准类型定义: ```typescript type Rules = { [key: string]: Array<{ required?: boolean; message?: string; // 错误提示信息 trigger?: string | string[]; // 验证触发时机,如 'blur', 'change' min?: number; // 字符串或数组最小长度 max?: number; // 字符串或数组最大长度 type?: string; // 数据类型,如 'string', 'number', 'boolean', 'array' 等 pattern?: RegExp; // 正则表达式验证 validator?(rule: any, value: any, callback: Function): void; // 自定义验证函数 len?: number; // 对字符串/数组的精确长度要求 }>; }; ``` #### 3. **具体示例** 下面展示了一个完整的 `el-form` 和 `rules` 结合使用的例子: ```vue <template> <el-form :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度应在 3 到 10 个字符之间', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '密码至少为 6 位', trigger: 'blur' } ] } }; } }; </script> ``` 在这个示例中: - `prop` 值 (`username`, `password`) 必须与 `rules` 对象中的键一致。 - 每个规则通过 `{}` 定义,并支持多种参数配置,例如 `required`, `message`, `trigger` 等[^4]。 #### 4. **高级用法——自定义验证器** 如果默认的校验规则无法满足需求,可以通过 `validator` 函数实现更复杂的逻辑。例如: ```javascript const validatePasswordStrength = (rule, value, callback) => { if (!value.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/)) { callback(new Error('密码必须包含大小写字母和数字,且不少于8位')); } else { callback(); } }; // 将此方法加入 rules { password: [{ validator: validatePasswordStrength, trigger: 'blur' }] } ``` 上述代码实现了对密码强度的要求:必须包含大写、小写字母以及数字,并且长度不得少于8位。 --- ### 总结 `el-form` 的 `rules` 属性提供了一种灵活的方式来定义表单验证规则。无论是简单的必填检查还是复杂的数据格式校验,都可以通过该属性轻松实现。同时,Element UI 还允许开发者扩展自己的验证逻辑以适应特定场景的需求[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

inticaler

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值