el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

el-form表单动态校验

el-form常规校验方式:

// 结构部分
<el-form ref="form" :model="form" :rules="rules">
	<el-form-item label="活动名称: " prop="name" required>
       <el-input v-model="form.name" />
    </el-form-item>
</el-form>

// script部分
<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  }
}

save() {
    this.$refs.form.validate((valid) => {
        if (valid) {
        	console.log('通过表单校验')
        }
    })
}

正题部分-表单动态校验
场景: 输入框根据单选项来动态校验表单
没有选中的选项就不用校验
在这里插入图片描述
效果: 在这里插入图片描述

<el-form ref="form" :model="form" :rules="rules">
	<el-form-item label="跳转类型: " prop="skipType" required>
        <el-radio-group v-model="form.skipType"">
          <el-radio :label="0" style="display: block; margin: 10px 0">无跳转</el-radio>
          <div>
            <el-radio :label="1" style="display: inline-block; margin: 11px 0">小程序内页</el-radio>
            <el-form-item
              label=""
              label-width="0"
              style="display: inline-block; height:20px"
              prop="insidePage"
              :rules="form.skipType === 1 ? rules.insidePage : []"
              :required="form.skipType === 1"
            >
              <!-- :rules="[{ required: true, message: '请输入小程序页面路径', trigger: 'blur' }]" -->
              <el-input
                v-model.trim="form.insidePage"
                placeholder="输入小程序页面路径"
                autocomplete="off"
                maxlength="20"
                style="width: 160px; margin-left: 10px"
              />
            </el-form-item>
          </div>
          <div>
            <el-radio :label="2" style="display: inline-block; margin: 11px 0 14px">外部小程序</el-radio>
            <el-form-item
              label=""
              label-width="0"
              style="display: inline-block"
              prop="outsideAppId"
              :rules="form.skipType === 2 ? rules.outsideAppId : []"
              :required="form.skipType === 2"
            >
              <el-input
                v-model.trim="form.outsideAppId"
                placeholder="输入小程序APPID"
                autocomplete="off"
                maxlength="20"
                style="width: 160px; margin-left: 10px"
              />
            </el-form-item>
         </div>
      </el-radio-group>
   </el-form-item>
</el-form>

// script部分
<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        skipType: [{ required: true, message: '请选择跳转类型', trigger: 'change' }],
        insidePage: [{ required: true, message: '请输入小程序页面路径', trigger: 'blur' }],
        outsideAppId: [{ required: true, message: '请输入小程序appid', trigger: 'blur' }]
      }
    }
  }
}

save() {
    this.$refs.form.validate((valid) => {
        if (valid) {
        	console.log('通过表单校验')
        }
    })
}

关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件

:rules="form.skipType === 1 ? rules.insidePage : []"
:required="form.skipType === 1" 
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form 表单组件可以使用 `rules` 属性来添加校验规则,具体步骤如下: 1. 在表单控件上添加 `prop` 属性,该属性的值对应表单数据对象中的属性。 2. 在 el-form 上添加 `rules` 属性,该属性的值是一个对象,对象的 key 是对应表单控件的 prop 值,value 是一个数组,数组中包含校验规则。 3. 在表单控件上添加 `v-model` 属性,该属性的值对应表单数据对象中的属性。 例如,在一个登录表单中,需要对用户名和密码进行校验,可以这样写: ```html <template> <el-form :model="loginForm" :rules="loginRules"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">登录</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { loginForm: { username: '', password: '', }, loginRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }, ], }, }; }, methods: { submitForm() { this.$refs.loginForm.validate((valid) => { if (valid) { // 表单校验通过,可以提交表单 console.log(this.loginForm); } else { // 表单校验未通过,不可以提交表单 return false; } }); }, }, }; </script> ``` 在这个例子中,我们使用了两个 el-form-item 组件来包含用户名和密码的输入框,分别对应 loginForm 对象的 username 和 password 属性。在 el-form 上设置了 loginRules 对象来指定校验规则,其中 username 和 password 分别指定了两个校验规则。在 submitForm 方法中,我们使用了 `$refs` 来获取表单组件,并调用了 validate 方法来进行表单校验。`validate` 方法的回调函数中,如果校验通过,则会返回 `true`,否则会返回 `false`。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值