### el-form 校验规则及文字居中实现 在 `el-form` 中，可以通过设置校验规则和调整样式来实现表单的校验功能以及文字的居中显示。以下是具体实现方法： #### 1. 校验规则的定义 校验规则可以通过 `rules` 属性进行定义，并且可以针对每个表单项单独设置校验规则[^3]。以下是一个示例代码： ```vue <template> <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item class="btn"> <el-button type="primary" @click="submitForm">确定</el-button> <el-button type="info" @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.formRef.validate((valid) => { if (valid) { alert('提交成功'); } else { console.log('验证失败'); return false; } }); }, resetForm() { this.$refs.formRef.resetFields(); } } }; </script> ``` #### 2. 文字居中的实现 为了使表单的文字内容居中显示，可以通过 CSS 样式进行调整。例如，设置 `el-form` 的样式为 `text-align: center;`，并确保子元素（如按钮）也继承该样式[^2]。 以下是一个完整的示例： ```vue <template> <div style="text-align: center;"> <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" style="display: inline-block;" > <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item class="btn"> <el-button type="primary" @click="submitForm">确定</el-button> <el-button type="info" @click="resetForm">重置</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.formRef.validate((valid) => { if (valid) { alert('提交成功'); } else { console.log('验证失败'); return false; } }); }, resetForm() { this.$refs.formRef.resetFields(); } } }; </script> <style scoped> .btn { text-align: center; } </style> ``` #### 注意事项 - `el-form` 的 `label-width` 属性需要根据实际需求调整，以确保文字对齐效果[^2]。 - 使用 `style="text-align: center;"` 可以让整个表单内容居中显示。 - 如果需要更复杂的布局，可以结合 `el-row` 和 `el-col` 组件进行调整[^1]。 --- ###