Elment
# Elment
# 登录消息提示
参考：Message 消息提示 (opens new window)
// 普通提示消息
this.$message('这是一条消息提示')
// 成功提示消息
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
})
// 警告提示消息
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
})
// 错误提示消息
this.$message.error('错了哦，这是一条错误消息')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 表单验证
参考文档：Element - Form 表单 -> 表单验证 (opens new window)
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator (opens new window)
下面是内置的基本验证规则：
| 规则 | 说明 |
|---|---|
| required | 必须的，例如校验内容是否非空 |
| pattern | 正则表达式，例如校验手机号码格式、校验邮箱格式 |
| range | 使用 min 和 max 属性定义范围。对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于 min，也不得大于 max。 |
| len | 要验证字段的确切长度，请指定 len 属性。对于字符串和数组类型，对 length 属性执行比较，对于数字类型，此属性指示数字的完全匹配，即，它可能仅严格等于 len。如果 len 属性与最小和最大范围属性组合，则 len 优先。 |
| enum | 要从可能值列表中验证值，请使用带枚举属性的枚举类型，列出该字段的有效值，例如： var descriptor = {role: {type: "enum", enum: ['admin', 'user', 'guest']} } |
如果内置的校验规则不满足，也可以自定义校验规则，参见：Element - Form 表单 -> 自定义校验规则 (opens new window)
下面我们项目中登录表单验证的配置。
（1）模板中的配置
1、给 el-from 组件绑定 model 为表单数据对象
2、给需要验证的表单项 el-form-item 绑定 prop 属性
- 注意：prop 属性需要指定表单对象中的数据名称
3、通过 el-from 组件的 rules 属性配置验证规则
4、ref 的作用主要用来获取表单组件手动触发验证
（2）在 data 中定义验证规则
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: '请输入正确的验证码格式' }
],
agree: [
{
// 自定义校验规则：https://element.eleme.cn/#/zh-CN/component/form#zi-ding-yi-xiao-yan-gui-ze
// 验证通过：callback()
// 验证失败：callback(new Error('错误消息'))
validator: (rule, value, callback) => {
if (value) {
callback()
} else {
callback(new Error('请同意用户协议'))
}
},
// message: '请勾选同意用户协议',
trigger: 'change'
}
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
（3）在登录的时候调用验证
onLogin () {
// 获取表单数据（根据接口要求绑定数据）
// const user = this.user
// 表单验证
// validate 方法是异步的
this.$refs['login-form'].validate(valid => {
// 如果表单验证失败，停止请求提交
if (!valid) {
return
}
// 验证通过，请求登录
this.login()
})
},
login () {
// 开启登陆中 loading...
this.loginLoading = true
request({
method: 'POST',
url: '/mp/v1_0/authorizations',
// data 用来设置 POST 请求体
data: this.user
}).then(res => {
console.log(res)
// 登录成功
this.$message({
message: '登录成功',
type: 'success'
})
// 关闭 loading
this.loginLoading = false
}).catch(err => { // 登录失败
console.log('登录失败', err)
this.$message.error('登录失败，手机号或验证码错误')
// 关闭 loading
this.loginLoading = false
})
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 给表单添加验证属性
:rules 定义开始表单验证 如: :rules="formRules"
需要绑定 vue 中的 data 数据验证规则，并且 form 表单必须要有:model 绑定值
验证子元素绑定为子元素的 prop 名称
- 必须给 el-from 组件绑定 model 为表单数据对象
- 给校园验证的表单项 el-form-item 绑定 prop 属性 需要自定义名称
- 通过 el-from 组件的 rules 属性配置验证规则
# 验证规则
验证规则配置常用的有以下几个
required 必须的 不能为空
pattern 正则表达式 ^ 以什么开头的
/ 以 1 开头 第二位为 2、5、7、8、9 的 9 位长度 以空为结尾的 { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' } // $以什么结束 如:以abc结束 abc$ 或者 [abc]$1
2
3range 使用 min 和 max 定义范围 如: {min: 6, max: 6, message: ' 请输入正确的验证码格式 ', trigger: 'blur'} 这个比较特殊不用指定 type 类型
validator 自定义 如:validator: 自定义函数名
# trigger 验证时机
- blur 当输入框失去焦点时验证
- change 当输入框改变后验证
# 手动触发验证表单
- 给 el-form 设置 ref 起名字
- 通过 ref 获取 el-form 组织，调用组件的 validate 进行验证
this.$refs.loginForm.validate((valid, err) => {
// 返回两个参数 valid 一个布尔值是否通过验证 err 验证的具体配置
// 所以我们可以通过返回的布尔值来判断表单是否通过验证
if (!valid) {
return //不通过返回
}
//通过调用api接口验证用户信息
this.login()
})
2
3
4
5
6
7
8
9
# 自定义定义规则
{
validator: (rule, value, callback) => {
// 定义验证规则 rule为表单的详细信息 value为布尔
// 验证通过: callback() 验证失败:callback(new Error('自定义错误消息提示'))
// console.log(value)
if (value) {
callback()
} else {
callback(new Error('请同意用户协议'))
}
},
trigger: 'change'
}
2
3
4
5
6
7
8
9
10
11
12
13