el-form手动增加验证,提示错误信息。

利用动态增减表单验证的方法

export default {
  data() {
	return {
	  rules: {
		age: [{ required: true, message: "请输入年龄", trigger: "blur" }]
	  }
	}
  }
},
methods() {
  isAdult() {
	this.rules.age.push({
      validator: (rule, value, callback) => {
        if (value > 18) {
          setTimeout(() => {
            callback()
          }, 1000)
        } else {
            callback(new Error('您还未成年!'))
        }
      },
      trigger: 'blur'
    })
    // 手动校验
    dom.validateField('age', valid => {
      if (valid) { 
        console.log('success!'); 
      } else { 
        console.log('error!'); 
      }
    })
    // 后续若不使用记得删除
    this.rules.schema = this.rules.schema.slice(1, 2)
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form-item的rules属性用于验证表单项的输入是否符合要求。 在使用el-form-item时,我们可以通过给rules属性传入一个数组来定义其验证规则。每个规则对象包含一个validator的属性,该属性是一个函数,用于自定义验证逻辑。此外,还可以通过message属性来定义当验证不通过时的错误提示信息。 例如,假设我们有一个输入框,要求不能为空且长度不能超过10个字符,我们可以通过以下方式使用rules属性进行验证: ``` <el-form-item label="姓名" prop="name" :rules="[ { required: true, message: '请输入姓名', trigger: 'blur' }, { max: 10, message: '姓名长度不能超过10个字符', trigger: 'blur' } ]"> <el-input v-model="formData.name"></el-input> </el-form-item> ``` 在上述例子中,我们定义了两条验证规则。第一条规则要求输入不能为空,若为空则触发blur事件时显示"请输入姓名"的错误提示。第二条规则要求输入的长度不能超过10个字符,若超过了则同样在blur事件时显示"姓名长度不能超过10个字符"的错误提示。 另外,在表单提交时,我们可以通过调用el-form组件的validate方法来手动触发对整个表单的验证验证结果会通过Promise的方式返回,我们可以根据返回的结果做相应的处理。 综上所述,el-form-item的rules属性可以帮助我们轻松地对表单项进行验证,并给出相应的错误提示,从而提高表单的可靠性和易用性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值