el-input校验 必填校验：当 el-input 为空时，提示“请输入用户名”。 提交校验：点击提交按钮时，自动触发校验，校验通过则提交成功，否则提示校验失败。

<think>好的，我现在需要解决用户关于element-ui中el-input必填校验和提交时触发校验的问题。用户希望看到具体的示例，包括用户名为空的提示信息和提交时的校验逻辑。 首先，我需要回忆一下element-ui的表单验证机制。记得element-ui使用的是async-validator库来进行验证，所以表单验证规则需要按照它的格式来写。必填校验通常使用required: true，并且要指定trigger，比如'blur'或者'change'。可能还需要自定义message提示信息。 然后，用户提到提交时触发校验，这应该是在提交表单时调用validate方法。根据引用[2]中的内容，通过formRef.value.validate来触发整个表单的验证，如果验证通过才提交，否则显示错误信息。所以代码中应该在submitForm方法里调用这个方法。 接下来，我需要构建一个示例。首先在模板部分，需要一个el-form组件，绑定model和rules。el-form-item的prop属性要对应rules里的字段，比如'username'。在el-input上设置v-model绑定到表单的数据对象，比如form.username，并且添加对应的规则。 规则部分，username的规则应该包含required: true，message提示“用户名不能为空”，trigger设为'blur'，可能还需要其他触发方式，比如'change'。在提交按钮的点击事件里调用validate方法，处理验证结果。 可能还需要注意表单的ref属性，以便在方法中访问表单实例，如ref="formRef"。数据部分，form对象初始化username为空字符串，rules对象定义username的验证规则。 另外，引用[4]中提到动态生成的表单元素验证，可能需要确保prop和model的字段对应正确，以及使用正确的验证规则类型。例如，type: 'number'可能需要配合v-model.number使用，但在这个例子里，用户名是字符串，不需要这个。 最后，测试示例代码是否正确，确保输入框失焦时触发校验，提交时也触发，并且提示信息正确显示。如果有错误，表单不会提交，错误信息会展示出来。</think>### Element-UI el-input 必填校验及提交校验实现 #### 1. 表单基础结构 ```html <template> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> ``` #### 2. 数据与校验规则配置 ```javascript <script> export default { data() { return { form: { username: '' }, rules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.formRef.validate(valid => { if (valid) { alert('提交成功'); // 此处执行实际提交操作 } else { console.log('校验未通过'); return false; } }); } } } </script> ``` #### 3. 实现要点说明 1. **触发机制**： - 失焦自动触发：通过`trigger: 'blur'`实现输入框失去焦点时自动验证[^1] - 提交时全量验证：通过`this.$refs.formRef.validate()`触发整个表单的校验[^2] 2. **验证反馈**： - 错误提示自动显示在表单项下方 - 输入正确内容后错误提示自动消失 - 提交时若有未通过校验项，控制台会输出提示 3. **扩展验证规则**： ```javascript // 可组合多种校验规则 rules: { username: [ { required: true, message: '必填字段' }, { min: 3, max: 5, message: '长度3-5个字符' }, { pattern: /^[a-zA-Z0-9]+$/, message: '只能包含字母数字' } ] } ```