element-ui form表单的动态rules校验

在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。
我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。在这里插入图片描述

上代码:

<el-form-item
          label="3、属于以下何种优先配售类型(单选,符合以下条件之一即属于优先配售范围)"
          prop="yxpslx"
          :rules="sqyxForm.jtpslx == '0' ? { required: true, message: '请选择', trigger: 'change'} : {}"
          label-width="600px"
          style="display:flex; flex-direction: column;"
          class="elformitem3"
          
        >
          <el-radio-group v-model="sqyxForm.yxpslx" :disabled="sqyxForm.jtpslx ==1" @change="changeYxpsRadio">
            <el-radio label="0" class="mb10" :disabled="sqyxForm.jtsgry == '0' && sqyxForm.jtpslx == '0'">A.夫妻双方均符合共有产权住房申购条件且共同申购</el-radio
            ><br />
            <el-radio label="1" class="mb10" :disabled="sqyxForm.jtsgry == 1">B.港澳青年</el-radio>
            <br />
            <el-radio label="2" class="mb10" :disabled="sqyxForm.jtsgry == 1">C.二孩以上家庭</el-radio>
            <br />
            <el-radio label="3" :disabled="sqyxForm.jtsgry == 1">D.经区政府批准的优先保障对象</el-radio>
          </el-radio-group>
        </el-form-item>

重点是这个: :rules=“sqyxForm.jtpslx == ‘0’ ? { required: true, message: ‘请选择’, trigger: ‘change’} : {}”
sqyxForm.jtpslx == ‘0’ 这个是我上面的选项来动态显示或者禁用的,当禁用的时候,就不校验!!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于element-ui的表单校验,我们通常是在rules属性中定义校验规则,然后在表单组件中绑定这些校验规则。如果需要在行内写校验规则,可以通过$refs属性获取表单组件的引用,然后在需要校验的地方手动调用校验方法进行校验。 以下是一个示例代码,展示了如何在行内写element-ui的表单校验规则: ```html <el-form ref="myForm" :model="formData" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name" :class="{ 'is-invalid': $refs.myForm && $refs.myForm.fields.name && $refs.myForm.fields.name.validateMessage }"></el-input> <span v-if="$refs.myForm && $refs.myForm.fields.name && $refs.myForm.fields.name.validateMessage" class="error-message">{{ $refs.myForm.fields.name.validateMessage }}</span> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="formData.age" :class="{ 'is-invalid': $refs.myForm && $refs.myForm.fields.age && $refs.myForm.fields.age.validateMessage }"></el-input> <span v-if="$refs.myForm && $refs.myForm.fields.age && $refs.myForm.fields.age.validateMessage" class="error-message">{{ $refs.myForm.fields.age.validateMessage }}</span> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` 在上面的代码中,我们在el-input组件中使用:class绑定了一个判断条件,当该条件为真时,会为该组件添加一个is-invalid类,从而使组件变红显示错误状态。同时,我们在el-input组件下方添加了一个span元素,用于显示校验错误信息。 接着,在submitForm方法中,我们通过$refs属性获取了表单组件的引用,并手动调用了validate方法进行校验。如果校验通过,则执行表单提交操作;否则,返回错误信息。 ```javascript methods: { submitForm() { this.$refs.myForm.validate((valid) => { if (valid) { // 表单校验通过,执行提交操作 } else { // 表单校验未通过,显示错误信息 this.$message.error('表单填写有误,请检查后重试!'); } }); }, }, ``` 需要注意的是,由于是在行内写校验规则,因此我们需要手动控制错误信息的显示和隐藏。在上面的代码中,我们使用了v-if指令来根据校验结果动态显示或隐藏错误信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值