Vue +iview自定义表单验证

  • **

Vue+iview 自定义表单验证

**

在data里随便定义一个函数名为validateorgCode,用正则写验证规则,在ruleValidate指定字段里面validator:validateorgCode

const validateSequence = (rule, value, callback) => {
let regNum = /^.{1,5}$/;
if (value === ‘’) {
callback(new Error(‘输入排序(升序)’));
} else if (!Number.isInteger(+value)) {
callback(new Error(‘输入数字’));
} else if (!regNum.test(value)) {
callback(new Error(‘长度过长’));
} else {
callback();
}
};

  • data() {
    const validateorgCode = (rule, value, callback) => {
    if (!Number.isInteger(+value)) {
    callback(new Error(‘输入数字值’));
    }
    else if (!/\d{12}$/.test(value)) {
    return callback(new Error(“请输入12位数字值”));
    } else {
    callback();
    }
    };
    return {
    ruleValidate: {
    orgCode: [
    {required: true,message: “区域编码不能为空”,rigger: “blur”},//框架自带验证规则
    { validator: validateorgCode, trigger: “blur” }//自定义的验证规则
    ],
    },
    }
<think>我们正在讨论iView框架中的自定义表单验证实现。iView(现在已更名为View Design)是一个基于Vue.js的UI组件库,提供了丰富的组件,包括Form表单组件,它支持自定义验证规则。 在iView中,表单验证主要依赖于async-validator库。我们可以通过定义验证规则(rules)来实现自定义验证逻辑。 ### 自定义表单验证步骤 1. **定义表单数据模型**:在Vue组件的data中定义表单数据对象。 2. **定义验证规则**:每个表单字段对应一个验证规则数组,每个规则是一个对象,可以包含required、type、min、max等内置规则,也可以自定义validator函数。 3. **在模板中绑定规则**:在Form和FormItem组件上绑定相应的规则。 4. **自定义验证函数**:当内置规则不满足需求时,可以编写自定义验证函数。 ### 示例代码 以下是一个自定义验证的示例,要求输入必须是手机号码格式: ```vue <template> <Form ref="form" :model="formData" :rules="formRules"> <FormItem label="手机号" prop="phone"> <Input v-model="formData.phone" placeholder="请输入手机号"></Input> </FormItem> <Button type="primary" @click="handleSubmit">提交</Button> </Form> </template> <script> export default { data() { // 自定义验证函数 const validatePhone = (rule, value, callback) => { if (!value) { return callback(new Error('手机号不能为空')); } // 手机号正则表达式 const reg = /^1[3-9]\d{9}$/; if (!reg.test(value)) { return callback(new Error('手机号格式不正确')); } callback(); }; return { formData: { phone: '' }, formRules: { phone: [ { required: true, message: '手机号不能为空', trigger: 'blur' }, { validator: validatePhone, trigger: 'blur' } ] } }; }, methods: { handleSubmit() { this.$refs.form.validate(valid => { if (valid) { // 验证通过,提交表单 } else { // 验证失败 } }); } } }; </script> ``` ### 说明 1. **自定义验证函数**:`validatePhone`函数接收三个参数:rule(当前规则)、value(表单字段的值)、callback(回调函数)。如果验证失败,调用callback并传入一个Error对象;如果验证通过,调用callback时不传参数。 2. **规则绑定**:在formRules中,phone字段的规则数组包含两个规则:第一个是内置的必填规则,第二个是自定义验证函数。trigger表示触发验证的时机,可以是'blur'(失去焦点)或'change'(值变化)。 3. **提交验证**:通过`this.$refs.form.validate`方法触发整个表单的验证。 ### 异步验证 如果需要异步验证(例如调用接口验证手机号是否已注册),可以在自定义验证函数中返回一个Promise: ```javascript const validatePhone = (rule, value, callback) => { if (!value) { return callback(new Error('手机号不能为空')); } // 模拟异步验证 return new Promise((resolve, reject) => { setTimeout(() => { if (value === '13800138000') { reject(new Error('该手机号已被注册')); // 相当于调用callback(error) } else { resolve(); // 相当于调用callback() } }, 1000); }); }; ``` 注意:在异步验证中,我们返回一个Promise,在验证完成时调用resolve(通过)或reject(不通过)。在iView中,自定义验证函数也可以使用异步函数(async/await)的方式。 ### 注意事项 - 自定义验证函数必须调用callback或者返回一个Promise,否则验证流程会中断。 - 同一个字段的多个验证规则会按顺序执行,直到有一个规则验证失败或全部执行完毕。 - 如果同时使用内置规则和自定义验证函数,注意规则的顺序。 通过以上方法,我们可以灵活地实现各种复杂的表单验证逻辑。 §§相关问题§§ 1. 如何在iView表单验证中处理异步验证(如检查用户名是否重复)? 2. iView表单验证有哪些内置的验证规则? 3. 如何实现iView表单的整体重置? 4. 在iView中,如何实现跨字段的验证(比如密码和确认密码)?</think>在 iView(现为 View Design)框架中实现自定义表单验证,主要通过以下步骤完成: ### 一、核心实现步骤 1. **定义验证规则对象** ```javascript const validatePassword = (rule, value, callback) => { if (!value) return callback(new Error('密码不能为空')) if (!/(?=.*[A-Z])(?=.*\d).{8,}/.test(value)) { return callback(new Error('需包含大写字母和数字,且长度≥8')) } callback() // 验证通过 } ``` 2. **在表单规则中引用** ```javascript export default { data() { return { formData: { username: '', password: '' }, formRules: { username: [ { required: true, message: '用户名必填', trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' }, { validator: validatePassword, trigger: 'blur' } // 自定义规则 ] } } } } ``` 3. **模板绑定规则** ```vue <template> <Form ref="formRef" :model="formData" :rules="formRules"> <FormItem prop="username" label="用户名"> <Input v-model="formData.username" /> </FormItem> <FormItem prop="password" label="密码"> <Input type="password" v-model="formData.password" /> </FormItem> <Button @click="handleSubmit">提交</Button> </Form> </template> ``` 4. **提交时触发表单验证** ```javascript methods: { handleSubmit() { this.$refs.formRef.validate(valid => { if (valid) { // 验证通过,提交数据 console.log('表单数据:', this.formData) } else { this.$Message.error('表单验证失败!') } }) } } ``` ### 二、高级用法示例 1. **异步验证(如检查用户名重复)** ```javascript const checkUsername = (rule, value, callback) => { if (!value) return callback(new Error('用户名不能为空')) setTimeout(async () => { const res = await api.checkUsername(value) res.exist ? callback(new Error('用户名已存在')) : callback() }, 500) } ``` 2. **跨字段验证(密码一致性)** ```javascript const validateConfirm = (rule, value, callback) => { if (value !== this.formData.password) { callback(new Error('两次输入密码不一致!')) } else { callback() } } ``` 3. **动态规则(根据条件切换验证)** ```javascript computed: { dynamicRules() { return { email: this.requireEmail ? [{ type: 'email', message: '邮箱格式无效', trigger: 'blur' }] : [] } } } ``` ### 三、最佳实践 1. **错误提示优化** ```vue <FormItem prop="phone" :error="customError.phone"> <Input v-model="formData.phone" /> </FormItem> ``` ```javascript this.$refs.formRef.validateField('phone', errorMsg => { this.customError.phone = errorMsg || '' }) ``` 2. **验证触发时机控制** ```javascript formRules: { instantField: { validator, trigger: 'change' }, // 实时验证 blurField: { validator, trigger: 'blur' } // 失焦验证 } ``` 3. **自定义错误显示样式** ```css .ivu-form-item-error-tip { color: #ff5500; font-size: 12px; } ``` ### 四、常见问题解决 1. **验证规则不生效**: - 检查 `FormItem` 的 `prop` 属性是否与 `rules` 键名一致 - 确保自定义验证函数调用 `callback()` 2. **动态数据验证失效**: ```javascript // 数据变更后重置验证 this.$nextTick(() => this.$refs.formRef.resetFields()) ``` 3. **手动触发表单验证**: ```javascript // 验证单个字段 this.$refs.formRef.validateField('username') // 重置验证状态 this.$refs.formRef.resetFields() ``` > **提示**:iView表单验证基于 [async-validator](https://github.com/yiminghe/async-validator) 库,支持所有标准验证规则[^1]。复杂场景可结合计算属性动态生成规则对象。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值