element plus 表单校验

### Element Plus 表单校验使用教程

在开发基于 Vue.js 的应用程序时，表单及其验证是不可或缺的一部分。Element Plus 提供了一套完整的解决方案来处理复杂的表单逻辑以及高效的验证机制。

#### 定义带有校验规则的表单

为了实现一个具备基本功能的登录页面并加入必要的字段验证，可以按照如下方式构建：

<template>
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
const ruleFormRef = ref()
let ruleForm = reactive({
  username: '',
  password: ''
})

// 自定义验证函数用于更复杂场景下的判断
const validateUsername = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入用户名'))
  }
  setTimeout(() => {
    if (value.length < 3 || value.length > 10) {
      callback(new Error('长度应在 3 到 10 个字符之间'));
    } else {
      callback();
    }
  }, 100);
};

const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'change' },
    { min: 6, max: 20, message: '长度应介于 6 至 20 字符之间', trigger: 'blur'}
  ]
});

function submitForm(formEl) {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) console.log('submit!');
    else console.log('error submit!!');
  });
}

function resetForm(formEl) {
  if (!formEl) return;
  formEl.resetFields();
}
</script>

此代码片段展示了如何创建包含两个输入项（`username`, `password`）的一个简单表单，并为其配置了相应的验证规则[^1]。当用户尝试提交表单时会触发这些规则；如果所有条件都满足，则执行成功回调；反之则显示错误提示给用户知道哪里出了错。

对于更加高级的需求，比如异步加载选项列表或是与其他服务端API交互获取动态数据源等情况，可以通过调整上述自定义验证器中的逻辑轻松应对各种实际应用场景的要求。