Element UI表单验证：保证用户输入数据的准确性

<el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
  <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
</el-form-item>

<el-form-item label="邮箱" prop="email" :rules="[{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }]">
  <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
</el-form-item>

<el-form-item label="手机号码" prop="phone" :rules="[{ pattern: /^1\d{10}$/, message: '请输入有效的手机号码', trigger: 'blur' }]">
  <el-input v-model="formData.phone" placeholder="请输入手机号码"></el-input>
</el-form-item>

<el-form-item label="密码" prop="password" :rules="[{ validator: validatePassword, trigger: 'blur' }]">
  <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
</el-form-item>

methods: {
  validatePassword(rule, value, callback) {
    if (value.length < 6) {
      callback(new Error('密码长度不能少于6位'));
    } else {
      callback();
    }
  }
}

<el-form :model="formData" :rules="rules" ref="form">
  <!-- 表单组件 -->
  <!-- ... -->

  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单验证通过，提交数据
        // ...
      } else {
        // 表单验证失败，显示错误信息
        return false;
      }
    });
  }
}