elementui校验部分字段-vue elementUI表单校准（多层嵌套）【转载】

bendan520 elementui

2023-09-17 0 6,075 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

嵌套对象的校准

项目中使用的vue+elementUI已经开发了一段时间了。我觉得表单校准是每个后端开发人员都无法回避的需求。在某些后端可以自行校准的情况下，首先校准后端。如果验证失败，则不会发送请求，直到满足校准规则，然后将请求发送到前端，从而提高用户体验。

elementUI有自己的校准表单的方式，要求传入的模型必须是对象。但是如果数据结构比较复杂，并且对象上面嵌套了对象，我们应该如何校准呢？本文给出了多级对象嵌套的方法。

例子

<template>
  <el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
        <el-form-item prop="name" label="姓名">
            <el-input v-model="formData.name" ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="formData.password" ></el-input>
        </el-form-item>
        <el-form-item prop="user.tel" label="手机号" >
          <el-input v-model="formData.user.tel" ></el-input>
        </el-form-item>
        <el-form-item prop="phones[0].model" label="手机号">
          <el-input v-model="formData.phones[0].model"></el-input>
        </el-form-item>
        <el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
         required: true, message: 'model不能为空', trigger: 'blur'
         }">
            <el-input v-model="phone.model"></el-input>
            <el-form :model="formData.phones[index]" label-width="100px">
                 <el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 +  '.data1'" label="data1" :rules="{
                 required: true, message: 'data1不能为空', trigger: 'blur'
                 }">
                     <el-input v-model="item.data1"></el-input>
                 </el-form-item>
           </el-form>
        </el-form-item>
    </el-form>
    <el-button @click="handleSubmit">提交</el-button>    
</template>

data () {
    return {
      formData:{
          name: '',
          password: '',
          user: {
              tel: ''
          },
           phones: [
              { brand: "华为", model: "", arr: [{ data1: "" }] },
              { brand: "小米", model: "", arr: [{ data1: "" }] }
          ] 
      },
      formRule:{
        name: [{required: true, message: '不能为空', trigger: 'blur'},
                {pattern: /^[u4E00-u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
        password: [{required: true, message: '不能为空', trigger: 'blur'},
          {validator: Verify.validatePassword, trigger: 'blur'},
        ],
        'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}],
        'phones[0].model': [{required: true, message: 'model不能为空', trigger: 'blur'}],
      },
    }
  },
methods: {
    handleSubmit(){
        const t = this;
        t.$refs['formData'].validate((valid) => {
            if(valid){
              console.log(this.formData);
            }
        })
    }
  }

验证方法

绑定到模型的formData中的外部用户也是一个对象。现在elementui校验部分字段，如果你想校准 tel，请在 prop 中传递 user.tel，并在规则中指定 user.tel。

对于子对象上面嵌套有链表的数据结构，如果要校准链表中的元素，则需要编写一个新的表单，以子对象作为新的表单，再走一遍这个过程。具体例子请看里面的代码。

对于验证规则elementui校验部分字段，可以通过模式或者验证器来实现。正则表达式可以直接写在pattern上。我不知道为什么文档中没有提到这一点。以前的验证通常是通过验证器来实现的。验证方法写在单独的文件中，这样可以被整个项目共享。使用时只需通过import导入即可。

验证功效

细化变革计划

错误用法：

<el-form-item label="规则名称" prop="ruleName">
	<el-input v-model="ruleform.ruleCO.ruleName" placeholder="规则名称" />
</el-form-item>

ruleRules: {
	ruleName: [
	  { required: true, message: '规则名必填', trigger: 'blur' },
	  {
	    min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur',
	  },
	],
}

正确使用：

<el-form-item label="规则名称" prop="ruleCO.ruleName">
	<el-input v-model="ruleform.ruleCO.ruleName" placeholder="规则名称" />
</el-form-item>

ruleRules: {
	'ruleCO.ruleName': [
	  { required: true, message: '规则名必填', trigger: 'blur' },
	  {
	    min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur',
	  },
	],
}

收藏 (0) 打赏

感谢您的支持，我会继续努力的!