Web前端-vue+element表单rules验证(多重object)

谁践踏了优雅 2023-10-03 12:34 17阅读 0赞

element的表单验证用的是**[async-validator][],** 官方说明文档地址:[GitHub - yiminghe/async-validator: validate form asynchronous][async-validator]

**1、data中数据**

data(){
     return{
         ruleForm:{
            account:null,
            dept:{
                deptName:null,
                deptCode:null,
            },
         },
         rules:{
            //type默认是string
            account: { required: true, message: '账户不能为空', trigger: 'blur' }, 
            //有多条校验条件的时候可以放个object数组
            'dept.deptName':[{type: "string", required: true, message: '部门名称不能为空', trigger: 'blur'}],  
            'dept.deptCode':{ type: "string",required: true, message: '部门编码不能为空', trigger: 'blur'},
         },
    }

**2、 template中代码**

**注**：prop中, dept下的属性, 要加上前缀 "dept." ， account直接写account，数据是从rulesForm下开始算起

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="ruleForm" 
                   :model="ruleForm" 
                   :rules="rules"
                   label-width="80px">
    
            <el-form-item label="部门编码" prop="dept.deptCode">
              <el-input v-model="ruleForm.dept.deptCode" placeholder="请输入部门编码" @click.native="handlerProductList" :disabled="!allowEditProduct" />
            </el-form-item>
            <el-form-item label="部门名称" prop="dept.deptName">
              <el-input v-model="ruleForm.dept.deptName" placeholder="请输入部门名称" @click.native="handlerProductList" :disabled="!allowEditProduct"  />
            </el-form-item>
    
            <el-form-item label="账户" prop="account">
              <el-input v-model="ruleForm.account" placeholder="请输入账户" />
            </el-form-item>
    
            <el-form-item label="备注" prop="remark">
              <el-input v-model="ruleForm.remark" placeholder="请输入备注" />
            </el-form-item>
    
          </el-form>
       </el-dialog>

**3、methods方法提交**

**注：**

**（1）**在表单重置 **reset**() 方法中，需要将数据**data**() 方法中也需要写入**dept**对象，**this.ruleForm**表单清空，不然会报错：\{  
deptName:null,  
deptCode:null,  
\},

## \[Vue warn\]：Error in render: "TypeError: Cannot read property 'XX' of undefined" ##

（2）**rules**只是规则，要实现，必须使用**validate**函数执行规则

methods: {
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
    
        // 表单重置
        reset() {
          this.ruleForm:{
            account:null,
            dept:{
                deptName:null,
                deptCode:null,
            },
          };
          this.resetForm("form");
        },
    
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加账户";
        },
    
        /** 提交按钮 */
        submitForm() {
    
          this.$refs["ruleForm"].validate(valid => {
            if (valid) {
              if (this.ruleForm.userId != null) {
                updateUser(this.ruleForm).then(response => {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              } else {
                addUser(this.ruleForm).then(response => {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });
              }
            }
          });
        },
    }

可参考

[vue+element表单验证(多重object嵌套)\_yytoo2的博客-CSDN博客\_element表单验证嵌套][vue_element_object_yytoo2_-CSDN_element]

[https://segmentfault.com/a/1190000014366951][https_segmentfault.com_a_1190000014366951]

[async-validator]: https://github.com/yiminghe/async-validator
[vue_element_object_yytoo2_-CSDN_element]: https://blog.csdn.net/yytoo2/article/details/82626219
[https_segmentfault.com_a_1190000014366951]: https://segmentfault.com/a/1190000014366951