vue+element表单验证(多重object嵌套)

最新推荐文章于 2025-06-23 09:43:23 发布

原创最新推荐文章于 2025-06-23 09:43:23 发布 · 1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#element #async-validator #vue

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

elementUI

5 篇文章

订阅专栏

本文介绍了如何在Vue+Element应用中进行双重对象嵌套的表单验证。针对async-validator库的使用，文章详细讨论了data中的数据结构，模板中的prop绑定规则，以及在提交表单时的注意事项，帮助开发者解决对象嵌套验证的问题。

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

element的表单验证用的是async-validator, 官方说明文档地址:https://github.com/yiminghe/async-validator;

element官网对表单验证只有简单的几个例子

这里记录下双层嵌套object数据的表单验证:

1. data中数据如下:

data(){
 return{
      ruleForm:{
        human:{
            name:'',
            sex:0,
        },
        dog:'',
       }
    }
    rules:{
        dog: { required: true, message: '请填写dog', trigger: 'blur' },  //type默认是string
        'human.name':[{type: "string", required: true, message: '请填写名字', trigger: 'blur'}],  //有多条校验条件的时候可以放个object数组
        'human.sex':{ type: "string",required: true, message: '请填写性别', trigger: 'blur'},
      },
}

需要注意的是: 在async-validator官网中, object嵌套的时候rules也是个嵌套的结构:

但是我试下下, 这个格式无法识别. 不知道是不是我哪里有问题.

2. template中代码:

需要注意的是prop中, human下的属性, 要加上前缀"human.", dog直接写dog, 也就是是从rulesForm下开始算起

 <el-form
        :inline="true"
        :model="ruleForm"
        label-width="110px"
        ref="ruleForm"
        :rules="rules"
        style="width:90%;margin:0 auto">
      <el-card>
            <div slot="header">
              <span>基本信息</span>
            </div>
            <div>
              <div>
                <el-form-item label="名字:"  prop="human.name">
                    <el-input v-model="ruleForm.human.name"></el-input>
                </el-form-item>
                 <el-form-item label="性别:" prop="human.sex">
                    <el-input v-model="ruleForm.human.sex"></el-input>
                </el-form-item>
               </div>
               <div>
                 <el-form-item label="dog:"  prop="dog">
                    <el-input v-model="ruleForm.dog"></el-input>
                </el-form-item>
               </div>
            </div>
       </el-card>
       <el-form-item style="margin-top:20px;float:right">
            <el-button type="primary" @click="submitForm('ruleForm')" >确定</el-button>
            <el-button >取消</el-button>
       </el-form-item>
       <div class="clear"></div>
</el-form>

3. 提交方法中:

 methods:{
    submitForm(formName) {
      var self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {   //提交前校验以下是否通过  self.$http.post(this.HOST+"/xxx",JSON.stringify(self.ruleForm.human), {headers: {"Content-Type": "application/json"}})  //我这里只提交human部分
          .then(res=>{

          }).catch(err => {
          });
        } else { //这一段是为了找到第一个校验不通过的地方, 然后focus过去
          var isError=document.getElementsByClassName("is-error");
          isError[0].querySelector('input').focus();
          return false;  
        }
      });
    },
}