ElementUI实现表单校验
表单校验步骤：
1.给表单el-form添加校验规则字段rules并动态绑定一个对象(对象可自定义，此处定义为rules)
2.在script里面加入rules对象，并要求校验的字段写进去，固定格式
例如：message的值可以自定义，blur表示表单失去焦点触发校验
username:[{required:true,message:'请输入用户名',trigger:'blur'}],
3.添加prop属性，在对应的el-form-item标签上我们让prop等于rules里面相对应的字段值
上述操作表单校验功能已有，如果想添加点击事件，通过提交来向用户显示校验结果，可以执行一下步骤
4.给el-form添加ref属性，属性值可以自行定义，例如LogForm
5.给button按钮添加一个点击事件
6.在methods方法里面实现点击事件
7.通过this.$refs.LogForm.validate()处理校验结果 (LoginForm是第四不中的属性值)
代码如图示：
<template>
<div>
<!--第一步：加上rules属性即开启表单验证规则，rules动态绑定了一个对象，对象在script里面定义，对象里面包含的是要验证的表单字段-->
<!--第四步：ref相当于给了el-form一个验证的时候使用的唯一名称-->
<!--model让表单动态绑定一个数据对象-->
<el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
<h3 class="loginTitle">系统登录</h3>
<!--第三步：prop的值与rules里面要验证的字段值是对应的，在对应的标签上我们让prop等于rules里面对应的字段值-->
<el-form-item prop="username">
<el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入用密码"></el-input>
</el-form-item>
<!--第五步：@click绑定了一个点击事件-->
<el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return {
loginForm: {
username: 'admin',
password: '123',
},
//第二步：我们把要进行验证的字段都放进rules对象里
rules:{
username:[{required:true,message:'请输入用户名',trigger:'blur'}],
password:[{required:true,message:'请输入密码',trigger:'blur'}],
}
}
},
methods:{
//第六步：点击事件
submitLogin() {
//第七步：
//这里refs.后面的loginForm与el-form表单中的ref属性值是对应的
//validate：对整个表单进行校验的方法，参数为一个回调函数。这里给了一个返回值valid，为Boolean类型，表示校验是否成功
this.$refs.loginForm.validate((valid)=>{
if (valid){
this.$message({
message: '登录成功！',
type: 'success'
});
}else{
this.$message.error('登录失败！')
return false;
}
})
}
}
}
</script>
<style scoped>
.loginContainer{
border-radius:15px ;
background-clip:padding-box ;
margin: 180px auto;
padding: 15px 35px;
background: white;
border: 1px solid #eaeaea;
box-shadow:0 0 25px #cac6c6 ;
width: 350px;
}
.loginTitle{
margin: 2px auto 20px auto;
text-align: center;
}
.rememberMe{
width: 100%;
margin: 9px auto;
}
</style>
