vue element外部盒子已经遍历，盒子中的表单如何校验

可以使用 Vue.js 提供的表单验证插件来校验表单。例如，可以使用 VeeValidate 插件来为 Vue Element 中的表单添加验证规则。

以下是使用 VeeValidate 插件的示例代码：

1. 安装 VeeValidate 插件

npm install vee-validate

2. 引入 VeeValidate 插件

import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

3. 在表单中使用验证规则

<el-form>
  <el-form-item label="用户名">
    <el-input v-model="username" name="username" placeholder="请输入用户名"></el-input>
    <span class="error">{{ errors.first('username') }}</span>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="password" name="password" type="password" placeholder="请输入密码"></el-input>
    <span class="error">{{ errors.first('password') }}</span>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">登录</el-button>
  </el-form-item>
</el-form>

4. 在 Vue 实例中定义验证规则

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm(formName) {
      this.$validator.validateAll(formName).then(result => {
        if (result) {
          // 验证通过，提交表单
          // ...
        } else {
          // 验证失败，提示错误信息
          // ...
        }
      })
    }
  }
}

在上面的代码中，我们使用 VeeValidate 插件为表单中的用户名和密码字段添加了验证规则，并在 Vue 实例中定义了提交表单的方法。在 submitForm 方法中，我们使用 this.$validator.validateAll(formName) 方法来验证表单中的所有字段，如果验证通过，就提交表单，否则提示错误信息。

当用户在表单中输入错误的数据时，VeeValidate 插件会自动显示错误信息。我们在表单中使用了 errors.first('username') 和 errors.first('password') 方法来获取错误信息，如果这两个方法返回的是非空字符串，就表示当前字段验证失败了。