vue element el-form 多级嵌套验证的实现示例

针对“vue element el-form 多级嵌套验证的实现示例”的完整攻略，我给您提供以下步骤：

步骤一：配置element-ui

首先需要在项目中引入Element-UI组件库，并按照文档要求进行全局和局部组件的注册，具体步骤可以参考官方文档：https://element.eleme.cn/#/zh-CN/component/installation

步骤二：准备你的表单数据

定义好表单需要验证的数据结构，这里给出一个例子：

formData: {
  name: '',
  age: '',
  job: {
    title: '',
    salary: ''
  }
}

这个数据结构包含三个属性，job属性也是一个对象，有两个属性。在满足某些条件时需要使用到这样的多级嵌套。

步骤三：定义验证规则

在数据结构准备好之后，需要定义验证规则，结合 Element-UI 的表单校验方法进行校验，验证规则也需要满足多级嵌套验证。例如：

rules: {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  'job.title': [
    { required: true, message: '请输入职位', trigger: 'blur' }
  ],
  'job.salary': [
    { required: true, message: '请输入薪资', trigger: 'blur' }
  ]
}

上述示例中定义了四个属性的验证规则，其中job.title和job.salary需要使用字符串引用以表明多级嵌套的层级关系。

步骤四：在表单中设置ref属性，用于在代码中引用表单

设置表单ref属性，可以在代码中直接引用表单实例进行表单校验。

<el-form ref="form" :model="formData" :rules="rules">
  <el-form-item label="名称" prop="name">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model="formData.age"></el-input>
  </el-form-item>
  <el-form-item label="职位">
    <el-form-item label="职称" prop="job.title">
      <el-input v-model="formData.job.title"></el-input>
    </el-form-item>
    <el-form-item label="薪资" prop="job.salary">
      <el-input v-model="formData.job.salary"></el-input>
    </el-form-item>
  </el-form-item>
</el-form>

在el-form标签中，设置ref属性，并绑定数据模型formData和验证规则rules。

步骤五：在代码中使用表单校验方法

表单校验方法可以在表单实例中直接调用，例如：

this.$refs.form.validate((valid) => {
  if (valid) {
    alert('验证通过')
  } else {
    alert('表单校验失败')
    return false
  }
})

调用$refs.form.validate()方法即可进行表单验证，回调函数中的参数valid表示表单是否验证通过。

示例一

下面是一个验证手机号和邮箱的示例代码：

<el-form ref="form" :model="formData" :rules="rules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="phone">
    <el-input v-model="formData.phone"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="formData.email"></el-input>
  </el-form-item>
</el-form>

export default {
  data () {
    return {
      formData: {
        username: '',
        phone: '',
        email: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('验证通过')
        } else {
          alert('表单校验失败')
          return false
        }
      })
    }
  }
}

上述代码中，需要验证的数据结构包括username、phone和email三个属性，也就是单层验证。验证规则包括每个属性需要经过的验证过程。调用表单校验方法$refs.form.validate()，验证表单的填写规范并给出提示信息。

示例二

下面是一个深层次多级嵌套验证的示例代码：

<el-form ref="form" :model="formData" :rules="rules">
  <el-form-item label="工作信息">
    <el-form-item label="公司" prop="company">
      <el-input v-model="formData.company"></el-input>
    </el-form-item>
    <el-form-item label="地址">
      <el-form-item label="省份" prop="address.province">
        <el-input v-model="formData.address.province"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="address.city">
        <el-input v-model="formData.address.city"></el-input>
      </el-form-item>
      <el-form-item label="街道" prop="address.street">
        <el-input v-model="formData.address.street"></el-input>
      </el-form-item>
    </el-form-item>
  </el-form-item>
</el-form>

export default {
  data () {
    return {
      formData: {
        company: '',
        address: {
          province: '',
          city: '',
          street: '',
        }
      },
      rules: {
        company: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        'address.province': [
          { required: true, message: '请输入省份', trigger: 'blur' }
        ],
        'address.city': [
          { required: true, message: '请输入城市', trigger: 'blur' }
        ],
        'address.street': [
          { required: true, message: '请输入街道', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('验证通过')
        } else {
          alert('表单校验失败')
          return false
        }
      })
    }
  }
}

在这个多级嵌套示例中，验证数据结构包括company、address.province、address.city和address.street四个属性，也就是深层次的嵌套验证。而验证规则也相应地进行了设置。在调用表单校验方法时，进行表单的验证并给出消息提示。