vue 动态表单验证

最新推荐文章于 2023-06-20 00:05:46 发布

原创最新推荐文章于 2023-06-20 00:05:46 发布 · 965 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文主要探讨Vue.js中如何实现动态表单验证，重点在于el-form-item组件和el-input的使用，讲解如何结合规则进行实时验证，确保表单数据的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键的几点
el-form-item 中：

 v-for="(item,index) in tempContract.need" 
:prop="'need.'+ index +'.cname'"
:rules="cardRules.charge"

el-form-item 下的 el-input :

	v-model="need[index].value"

<el-col :span="12" v-for="(item,index) in tempContract.need" :key="index">
   <el-form-item :label="item.label" class="rules" :prop="'need.'+ index +'.cname'" :rules="cardRules.charge">
    <el-input :placeholder="item.value" v-if="item.cname!=='type'" v-model="need[index].value" @change="changeConsole"></el-input>
    <el-select class="selectClass" v-if="item.cname==='type'" v-model="need[index].value" placeholder="请选择">
      <el-option
        v-for="item in xiaXiaoOptions"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </el-for



data() {
      let checknumber = (rule, value, callback) => {
        debugger
        let reg = /^[\d]+$/;
        if (value ==='订单支付金额小写'  && !reg.test(value)) {
          callback(new Error('请输入不小于0的整数'));
        } else {
          callback()
        }
      };
      return {
        saveRules: {
          tempName: [
            {
              required: true, message: '请选择模板', trigger: 'blur'
            }
          ],
          username: [
            {
              required: true, message: '请输入签署人', trigger: 'blur'
            }
          ],
          phone: [
            { required: true, trigger: 'blur', validator: validPhone }
          ],
          tempId: [
            { required: true, trigger: ["blur",'change'], message: '请选择模板' }
          ]
        },
        cardRules: {
          charge: [{
            required: true,
            message: '请输入充值金额',
            trigger: 'blur'
          }, {
            validator: checknumber,
            trigger: 'blur'
          }]
        }
      }
    }