element ui el-form如何动态验证单个表单？

站长

2024年07月07日 08:41 · 阅读数 5

问题：

输入内容，失去焦点，应该提示【请输入正确的身份证号码】，也就是走rules的第二条规则partner，而不是走第一条require。 element ui el-form如何动态验证单个表单？

示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>el-form表单示例</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <el-form :model="form" label-width="auto" :rules="rules">
        <el-form-item label="证件类型" prop="password">
          <el-select v-model="form.paperType" clearable placeholder="请选择证件类型">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="(item, index) in paperTypeOption"
                      :key="index"
                    ></el-option>
                  </el-select>
        </el-form-item>
        <el-form-item label="证件号码" v-if="+form.paperType == 1" prop="idCardReg">
          <el-input type="number" v-model="form.paperNum" placeholder="请输入身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" v-else-if="+form.paperType == 2" prop="passportReg">
          <el-input type="number" v-model="form.paperNum" placeholder="请输入护照号码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            paperTypeOption: [{label:'身份证',value:1},{label:'护照',value:2}],
            form: {
              type: '',
              paperNum: '',
            },
            rules: {
              idCardReg: [
                //身份证
                { required: true, message: '请输入身份证号码', trigger: 'blur' },
                {
                  pattern: /^[1-9]\d{5}(19\d{2}|20[01]\d)(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/,
                  message: '请输入正确的身份证号',
                  trigger: 'blur'
                }
               ],
              passportReg: [
                //护照
                { required: true, message: '请输入护照号码', trigger: 'blur' },
                { pattern: /^[a-zA-Z]{5,17}$|^[a-zA-Z0-9]{5,17}$/, message: '请输入正确的护照号码', trigger: 'blur' }
              ],
            }
          };
        },
        methods: {
          submitForm() {
            this.$refs.form.validate(valid => {
              if (valid) {
                console.log('表单验证通过');
              } else {
                console.log('表单验证失败');
              }
            });
          },
          resetForm() {
            this.$refs.form.resetFields();
          }
        }
      });
    </script>
  </body>
</html>

在线demo：

el-form表单示例 - JS Bin

1个回答

test

2024-07-07

prop 属性改动一下就好了，因为你的 prop 和你 v-model 绑定的对不上，对应的 form.passportReg 是空。

- <el-form-item label="证件号码" v-if="+form.paperType == 1" prop="idCardReg">
+ <el-form-item label="证件号码" v-if="+form.paperType == 1" prop="paperNum">
  <el-input type="number" v-model="form.paperNum" placeholder="请输入身份证号码"></el-input>
</el-form-item>
- <el-form-item label="证件号码" v-else-if="+form.paperType == 2" prop="passportReg">
+ <el-form-item label="证件号码" v-else-if="+form.paperType == 2" prop="paperNum">
  <el-input type="number" v-model="form.paperNum" placeholder="请输入护照号码"></el-input>
</el-form-item>

但是这样的话，可能提示就会错误因为都是校验的 paperNum 属性，所以最好是修改 v-model 绑定的值，并且在最后提交的时候处理成正确的提交参数。

<el-form-item label="证件号码" v-if="+form.paperType == 1" prop="idCardReg">
-  <el-input type="number" v-model="form.paperNum" placeholder="请输入身份证号码"></el-input>
+  <el-input type="number" v-model="form.idCardReg" placeholder="请输入身份证号码"></el-input>
</el-form-item>
<el-form-item label="证件号码" v-else-if="+form.paperType == 2" prop="passportReg">
-  <el-input type="number" v-model="form.paperNum" placeholder="请输入护照号码"></el-input>
+  <el-input type="number" v-model="form.passportReg" placeholder="请输入护照号码"></el-input>
</el-form-item>

你就按照绑定的 prop 和 v-model 绑定的值一样就可以了，因为你的 form 在执行 validate() 校验表单的时候会去找你在 model 上绑定的变量中对应的 prop 值。如果没有自然就不会通过必填校验。如果因为最后提交的参数是同一个，所想要在模板中共用同一个属性，那么你就得去写自定义校验，就会产生大量不必要的代码。所以在视图模板中输入的时候使用不同的变量来做区分，最后在提交的时候统一收集整理为正确的参数提交给后端。这样业务代码会简洁并且很好阅读。

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容