el-form validate

### 使用 `el-form` 验证功能 Element UI 提供了一个强大的表单组件 `el-form`，支持内置的验证机制来确保数据的有效性和一致性。为了实现这一目标，可以利用 `rules` 属性定义字段级别的校验规则。 #### 定义表单项及其验证规则 创建一个包含输入框和其他控件的表单时，在 `<el-form>` 组件上绑定 `model` 和 `rules` 参数： ```html <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"> <!-- 用户名 --> <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('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </template> ``` #### 设置 JavaScript 中的数据模型与方法 在脚本部分初始化表单数据结构并配置相应的验证逻辑： ```javascript export default { data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; return { ruleForm: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [{ validator: validatePass, trigger: 'blur' }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; ``` 上述代码展示了如何设置简单的用户名和密码字段，并为其添加必要的验证条件[^1]。