elementui一个表单不同情况下的验证规则

1、页面

HTML:

<el-form
      :model="dataForm"
      :rules="rulesList"
      ref="dataForm"
      v-loading="loading"
    >
     <!-- type = '1' 显示 -->
      <el-row>
        <el-col :span="22">
          <el-form-item label="文本1" required label-width="120px">
            <el-input
              placeholder="文本1"
              v-model.trim="dataForm.text1"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
       <!-- type = '2' 显示 -->
      <el-row>
        <el-col :span="22">
          <el-form-item label="文本2" required label-width="120px">
            <el-input
              placeholder="文本2"
              v-model.trim="dataForm.text1"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
 </el-form>

data:

dataForm:{
	type:'1',
	text1:'',
	text2:''
}

  computed: {
    rulesList: function () {
      if (this.dataForm.type === '1') {
        return this.rule1
      } else {
        return this.rule2
      }
    },
    rule1 () {
      return {
        text1: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    },
    rule2 () {
      return {
        text2: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 Element UI 中,可以通过自定义验证规则验证输入的数据。面是一个示例代码,演示何自定义验证规则: ```javascript // 导入 Element UI 的验证规则方法 import { validate } from 'element-ui' // 自定义验证规则 const customRules = { // 自定义规则名称:验证函数 customRule1: (rule, value, callback) => { if (value === 'custom') { callback(new Error('自定义规则1验证失败')) } else { callback() } }, customRule2: (rule, value, callback) => { if (value.length < 5) { callback(new Error('自定义规则2验证失败')) } else { callback() } }, } // 在中使用自定义验证规则 <el-form :rules="customRules"> <el-form-item label="自定义规则1"> <el-input v-model="input1"></el-input> </el-form-item> <el-form-item label="自定义规则2"> <el-input v-model="input2"></el-input> </el-form-item> </el-form> ``` 在上面的代码中,我们首先导入了 Element UI 的验证规则方法 `validate`。然后定义了两个自定义验证规则 `customRule1` 和 `customRule2`,这两个规则分别对输入的值进行验证,并根据验证结果调用回调函数 `callback`。当验证失败时,使用 `new Error()` 创建一个错误对象,并传递给回调函数;当验证通过时,直接调用回调函数即可。 最后,在中使用自定义验证规则时,将自定义规则对象 `customRules` 通过 `:rules` 属性传递给 `el-form` 组件。在每个需要验证项中,通过 `v-model` 绑定输入的值,然后在 `el-form-item` 组件中添加相应的标签和验证提示信息。 这样,当用户输入的值不符合自定义的验证规则时,Element UI 会自动显示相应的错误提示信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值