1:模板中配置
<el-form ref="log-form" :model="form" label-width="80px" class='form' :rules="formRules"> <el-form-item label="用户名:" prop='name' class="label-font"> <el-input v-model="form.name" ></el-input> </el-form-item> <el-form-item label="密码:" prop='password'> <el-input v-model="form.password" type='password'></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> <!-- <el-button type="primary" @click="onSubmit">注册</el-button> --> </el-form-item> </el-form>
- 给 el-from 组件绑定 model 为表单数据对象
- 给需要验证的表单项 el-form-item 绑定 prop 属性
- 注意:prop 属性需要指定表单对象中的数据名称
- 通过 el-from 组件的 rules 属性配置验证规则
- ref 的作用主要用来获取表单组件手动触发验证
2:在 data 中定义验证规则
data () { return { form: { name: '', password: '' }, formRules: { name: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 8, max: 18, message: '长度在8到18之间', trigger: 'blur' } ] } } },
(3)在登录的时候调用验证
onSubmit () { // 验证数据 this.$refs['log-form'].validate(valid => { // 如果验证失败,禁止提交 if (!valid) { return } console.log('login') // this.login() }) },