uview 弹出框放表单 验证失效_基于vue2.0前端组件库element中 el-form表单 自定义验证填坑...

本文主要介绍了在Vue2.0中使用Element UI的el-form组件进行表单验证时遇到的问题及解决方法,包括validate/resetFields未定义、数字类型验证、表单校验规则不起作用等常见问题,通过示例代码详细解析了解决方案。
摘要由CSDN通过智能技术生成

我在平时使用过程中,遇到的问题。

自定义表单验证出坑:

1. validate/resetFields 未定义。

原因:

1:要验证的DOM,还没有加载出来。

2:有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate(); 这种方式,不是你们想要的结果。

解决方法

1: 要验证的DOM,还没有加载出来。

this.ticketDialog = true;

//对整个表单进行重置,将所有字段值重置为初始值并移除校验结果

this.$nextTick(function() {

this.$refs.ticketInfoForm.resetFields();

})

2: 有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate();

methods: {

submitForm(ruleForm2) {

//官网 this.$refs[ruleForm2].validate();

//在实际使用中,会报错。validate未定义

//使用this.$refs.ruleForm2.validate(); 成功。

this.$refs[ruleForm2].validate((valid) => {

if (valid) {

alert('submit!');

}

uview form组件提供了一些表单验证的方法,可以在组件上设置验证规则。 1. 设置验证规则 在form组件上设置rules属性,rules属性是一个数组,数组每个对象表示一个表单项的验证规则。例如: ``` <template> <u-form :rules="rules"> <u-form-item label="姓名" prop="name"> <u-input v-model="form.name"></u-input> </u-form-item> <u-form-item label="年龄" prop="age"> <u-input v-model="form.age"></u-input> </u-form-item> </u-form> </template> <script> export default { data() { return { form: { name: '', age: '' }, rules: [ { prop: 'name', required: true, message: '请输入姓名' }, { prop: 'age', required: true, message: '请输入年龄' } ] } } } </script> ``` 上面代码,设置了两个表单项的验证规则,分别是必填项验证。 2. 触发验证 在form组件上设置ref属性,可以通过ref属性获取form组件实例,然后调用实例的validate方法触发验证。 ``` <template> <u-form :rules="rules" ref="form"> <u-form-item label="姓名" prop="name"> <u-input v-model="form.name"></u-input> </u-form-item> <u-form-item label="年龄" prop="age"> <u-input v-model="form.age"></u-input> </u-form-item> <u-button type="primary" @click="submit">提交</u-button> </u-form> </template> <script> export default { data() { return { form: { name: '', age: '' }, rules: [ { prop: 'name', required: true, message: '请输入姓名' }, { prop: 'age', required: true, message: '请输入年龄' } ] } }, methods: { submit() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,执行提交操作 } else { // 表单验证未通过,提示错误信息 } }) } } } </script> ``` 上面代码,点击“提交”按钮时,调用submit方法,通过this.$refs.form.validate方法触发表单验证验证通过后执行提交操作,验证未通过则提示错误信息。 3. 定制验证规则 除了设置默认的验证规则,也可以在表单项上设置自定义验证规则。 ``` <template> <u-form :rules="rules" ref="form"> <u-form-item label="姓名" prop="name"> <u-input v-model="form.name"></u-input> </u-form-item> <u-form-item label="年龄" prop="age"> <u-input v-model="form.age"></u-input> </u-form-item> <u-button type="primary" @click="submit">提交</u-button> </u-form> </template> <script> export default { data() { return { form: { name: '', age: '' }, rules: [ { prop: 'name', validator: (rule, value, callback) => { if (!value || value.length < 2) { callback(new Error('姓名长度不能少于2个字符')) } else { callback() } } }, { prop: 'age', required: true, message: '请输入年龄' } ] } }, methods: { submit() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,执行提交操作 } else { // 表单验证未通过,提示错误信息 } }) } } } </script> ``` 上面代码自定义了姓名表单项的验证规则,如果输入的姓名长度少于2个字符,会提示“姓名长度不能少于2个字符”的错误信息。自定义验证规则需要在validator属性设置,validator属性是一个函数,函数接收3个参数:验证规则对象、表单项的值、回调函数。当验证规则不符合时,调用回调函数并传入错误信息,否则不传入任何参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值