ElementUI----validator表单校验
为表单控件提供校验规则
上面首先要有一个对象，进行数据绑定
我们有多少个控件，就要进行多少个数据绑定
接下来，我们定义校验规则
这个校验规则一定是要和数据同名的；
ref：类似于id，唯一标识
:model="user"，数据绑定
:rules="formRules"，注入校验规则
prop：子组件 通过 prop 接受数据
label：为显示得内容名字
radio单选框，:label="1"
checkbox复选框，:label="1"
select选择器，:value="1" ， label为显示得内容名字
required：true，要求不能为空
trigger：”blur“，触发方法
单击事件得时候，再一次进行校验
```
<template>
<div class="login">
<el-form
ref="loginForm"
:model="user"
label-width="180px"
label-position="top"
size="mini"
:rules="formRules"
> <!-- :rules="formRules" 注入校验规则-->
<!-- 子组件 通过 prop 接受数据 -->
<el-form-item label="用户名" prop="username">
<el-input v-model="user.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
user: {
username: "",
password: "",
},
// 注意：校验规则属性，要和，数据属性名，一致
formRules: {
username: [
{
required: true, // 表示这一项必须不能为空
message: "用户名不能为空", // 如果违反了这个规则，错误提醒
trigger: "blur", // 何时去执行这个校验呢，什么事件下执行这个校验呢，=> 失去焦点得时候（什么时候触发，失去焦点得时候）
}, // 具体校验项
{
min: 3,
max: 5,
message: "用户名长度在3~5个字符间",
trigger: "blur",
},
], // 数组类型
password: [
{ required: true, message: "密码不能为空", trigger: "blur" },
],
},
};
},
methods: {
handleSubmit() {
// 发起登陆请求前，再次进行表单校验
// 先获取表单对象，然后执行校验方法 => ref，类似于id的存在
this.$refs["loginForm"].validate((valid) => {
// valid表示校验结果，true校验通过，false校验失败
if (valid) {
alert("校验通过，可以发起请求");
} else {
alert("校验失败，不可以发起请求");
}
}); // 获取表单的ref属性值，这个方法需要一个回调函数，validate自动执行校验，，
},
},
};
</script>
