最近在学习如何使用 VUE 框架编写后台管理系统，首先完成的是登录页面，登录页面中需要给 Form 表单配置登录验证，现总结如下：
参考文档
Element组件库
登录页面中创建组件使用的是 Element 组件库中的Form表单
使用文档：Element中Form表单
该文档中包含表单验证的实现方法教学，本文参考了该篇文档。
完成基本的登录功能后，登录页面如下
现在开始配置登录验证
验证规则绑定
所有的验证在配置规则前都需要设置下面三步
1. 将 From 组件的 model 绑定表单数据对象
<template><div class="login-container"><div class="login-form-wrap"><el-formclass="login-form":model="user"></el-form></div></div>
</template>
将需要验证的 Form 表单 el-form 的 model 属性设置为表单传输的数据对象 user
2. 将需验证的表单项的 prop 绑定表单对象中的数据项
<template><div class="login-container"><div class="login-form-wrap"><el-form><el-form-item prop="mobile"><!-- 输入框 input 组件 双向绑定 from 数据 --><el-inputv-model="user.mobile"placeholder="请输入手机号"></el-input></el-form-item><el-form-item prop="code"><!-- 输入框 input 组件 双向绑定 from 数据 --><el-inputv-model="user.code"placeholder="请输入验证码"></el-input></el-form-item><el-form-item prop="agree"><el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox></el-form-item></el-form></div></div>
</template>
将需要验证的三个el-form-Item 表单项 手机号、验证码和用户协议 的 prop 属性值指定为表单数据对象user中的数据名称 data、code和agree
3. 将 Form 组件的 rules 绑定验证规则数据
- 新建数据对象 formRules ，用来配置具体规则
<script>
export default {data () {return {formRules: {}}}
}
</script>
Element 中的 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入
<template><div class="login-container"><div class="login-form-wrap"><el-formclass="login-form":model="user":rules="formRules"></el-form></div></div>
</template>
将 Form 组件 el-form 的 rules 属性值设置为 data 中的数据对象 formRules
配置规则
在数据对象 formRules 中配置规则
Element 中约定好了 Form 组件的表单验证规则
使用文档：验证规则
一般规则
上述约定好的规则中部分常用的规则说明如下图：
- required
required 规则用来设置是否为必须的，值为true则必须填写该表单项 - message
message 用来设置验证是啊比提示信息，即表单项中的数据不满足验证规则时显示的提示信息 - trigger
trigger 用来设置触发验证的时机，属性值有两种
| 属性值 | 意义 |
|---|---|
| blur | 失去焦点时触发验证 |
| change | 表单项数据改变时触发验证 |
- pattern
使用正则表达式配置规则
<script>
export default {data () {return {formRules: {// 要验证的数据名称：规则列表[]mobile: [{ required: true, message: '请输入手机号', trigger: 'change' },{ pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }],code: [{ required: true, message: '请输入验证码', trigger: 'change' },{ pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }]}}}
}
</script>
当前设置的 mobile 手机号 的验证规则：
- require规则：必须填写，未填写时显示验证失败提示信息：“请输入手机号”
- pattern规则：是以1开头第二位是3或5或7或8或9的9位整字，不满足时显示验证失败提示信息：‘请输入正确的手机号’
当前设置的 code 验证码 的验证规则：
- require 规则：必须填写，未填写时显示验证失败提示信息：“请输入验证码”
- pattern 规则：是6位整数，不满足时显示验证失败提示信息：“输入正确的验证码格式”
自定义规则
Element自身约定好的表单验证规则不满足需要时，可以自定义规则。
自定义验证规则的函数为 validator
- 参数
validator函数的参数是 rule , value 和 callback ，valid 参数传入验证的数据对象的值。
- 返回值
validate 函数的返回值通过callback来设置
一般情况下：
| 验证情况 | 返回值 |
|---|---|
| 通过 | callback（） |
| 失败 | callback（new Error（‘验证失败提示信息’）） |
validator 验证函数不是外部调用的，而是当 Element 的 Form 表单组件触发验证时自己内部调用，使用时只需要提供函数处理的逻辑
<script>
export default {data () {return {formRules: {// 要验证的数据名称：规则列表[]agree: [{// 自定义验证规则validator: (rule, value, callback) => {if (value) {// 验证通过callback()} else {// 验证失败callback(new Error('请勾选用户协议'))}},trigger: 'change'}]}}}
}
</script>
当前设置的 agree 用户协议 的规则：
- 当 agree = true 即已勾选用户协议时返回 callback() ，验证成功。
- 当 agree = false 即未勾选用户协议时返回验证失败提示信息：“请勾选用户协议”
手动触发验证
登录页面需要在点击登录按钮时触发验证，通过 Form 组件的 validate() 方法实现
1.设置 From 组件的 ref
<template><div class="login-container"><div class="login-form-wrap"><el-formclass="login-form"ref="login-form":model="user":rules="formRules"></el-form></div></div>
</template>
给 Form 组件 el-form 设置一个 ref，起一个名字。
调用 validate()
<script>
export default {methods: {onLogin () {// 表单验证// validate 方法是异步的this.$refs['login-form'].validate(valid => {// 如果表单验证失败，停止请求提交if (!valid) {return}// 验证通过，提交登录this.login()})}}
}
</script>
在登录按钮绑定的方法 onLogin() 中，通过 ref 获取 Form 组件 el-form ，调用 validate() 方法，触发表单验证。
-
验证失败
退出 onLogin() 方法，不提交登录请求 -
验证通过
提交登录请求
结果
最终的表单如下：
- 输入为空
改变了默认页面的数据，触发验证，显示验证的表单项未填写时的验证失败提示信息 - 输入格式错误
改变了默认页面的数据，触发验证，显示验证的表单项不满足格式时的验证失败提示信息 - 点击登录按钮
点击登录前的默认页面
点击登录后
点击登录按钮，触发验证。
未勾选用户协议，显示用户协议表单项的数据不满足自定义规则时的验证失败提示信息
上方展示的代码均仅限于实现该步骤的功能的部分，完整代码如下：
<template><!-- 根节点 --><div class="login-container"><div class="login-form-wrap"><!--el-form 表单组件每个表单项都必须使用 el-form-item 组件包裹--><div class="login-head"><h1>登录</h1><!-- <div class="logo"></div> --></div><!--配置 Form 表单验证：1、必须给 el-from 组件绑定 model 为表单数据对象2、给需要验证的表单项 el-form-Item 绑定 prop 属性注意prop属性需要制定表单对象中的数据名称3、通过 el-form 组件的 rule 属性配置验证规则手动触发表单验证：1. 给 el=from 设置 ref （起个名字）2. 通过 ref 获取 el-form 组件，调用组件的 validate 方法进行验证--><el-formclass="login-form"ref="login-form":model="user":rules="formRules"><!-- 提示文本 --><el-form-item prop="mobile"><!-- 输入框 input 组件 双向绑定 from 数据 --><el-inputv-model="user.mobile"placeholder="请输入手机号"></el-input></el-form-item><el-form-item prop="code"><!-- 输入框 input 组件 双向绑定 from 数据 --><el-inputv-model="user.code"placeholder="请输入验证码"></el-input></el-form-item><el-form-item prop="agree"><el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox></el-form-item><el-form-item><el-buttonclass="login-btn"type="primary":loading="loginLoading"@click="onLogin">登录</el-button></el-form-item></el-form></div></div>
</template><script>
import { login } from '@/api/user' // 按需加载export default {name: 'LoginIndex',components: {},props: {},data () {return {user: {mobile: '13911111111', // 手机号code: '246810', // 验证码agree: false // 是否同意协议},// checked: false, // 是否同意协议的选中状态loginLoading: false, // 登录的 loading 状态formRules: { // 表单验证规则配置// 要验证的数据名称：规则列表[]mobile: [// 必填项{ required: true, message: '请输入手机号', trigger: 'change' },{ pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }],code: [{ required: true, message: '请输入验证码', trigger: 'change' },{ pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }],agree: [{// 自定义验证规则validator: (rule, value, callback) => {if (value) {// 验证通过callback()} else {// 验证失败callback(new Error('请勾选用户协议'))}},// message: '请勾选同意用户协议',trigger: 'change'}]}}},computed: {},watch: {},created () {},mounted () {},methods: {onLogin () {// // 获取表单数据(根据接口要求绑定数据)// const user = this.user// 表单验证// validate 方法是异步的this.$refs['login-form'].validate(valid => {// 如果表单验证失败，停止请求提交if (!valid) {return}// 验证通过，提交登录this.login()})},login () {// 开启登陆中 loading...this.loginLoading = truelogin(this.user).then(res => {console.log(res) // 提取数据// 登录成功this.$message({message: '登录成功',type: 'success'})// 关闭 loading...this.loginLoading = false// 将接口返回的用户相关数据存储到本地window.localStorage.setItem('user', JSON.stringify(res.data.data))// 跳转到首页this.$router.push({name: 'home'})}).catch(err => {// 登陆失败console.log('登录失败', err) // 错误提示this.$message.error('登录失败，手机号或验证码错误')// 关闭 loading...this.loginLoading = false})}}
}
</script><style scoped lang="less">
.login-container {// 整个页面position: fixed;left: 0;top: 0;right: 0;bottom: 0;// form 内容display: flex; // 默认水平排列flex-direction: column; // 设置上下排列// form 水平居中justify-content: center;// form 垂直居中align-items: center;// 背景图片background: url("./login_bg.jpg") no-repeat;background-size: cover;.login-form-wrap {min-width: 300px;padding: 30px 50px 10px;background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);.login-head {display: flex;justify-content: center;color: #5d8dfd;.logo {width: 200px;height: 57px;// background: url("./logo_index.png") no-repeat;background-size: contain;}}// form.login-form{.login-btn{width: 100%;background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);}}}
}
</style>
该代码包含其他功能的实现，仅供参考。
以上为个人总结的登录的表单验证，如有错误请多包含，欢迎在评论区指出。
也欢迎其他学习VUE的小伙伴在评论区一起交流，祝所有看到这篇博客还看到结尾这里的人都能成为前端大佬！
