概述
所谓表单验证，就是检验用户的输入是否正确：
- 是否未输入
- 格式是否正确
- 还可以请求后端，和数据库的信息进行校验，例如：注册时，检验用户名是否已经存在于数据库中
Element UI表单默认使用async-validator做验证，Element UI已经内置了async-validator，直接使用即可，表单验证分为两种情况：
- Element UI的规则，直接使用，进行一些配置即可
- 自定义规则，需要自己编写验证规则，更加灵活，可以通过Ajax请求后端
表单校验属性
type
验证用户输入的数据类型
| 类型 |
说明 |
| string |
校验类型为Sting，type的默认值为string |
| number |
校验类型为number |
| boolean |
类型必须为boolean |
| interger |
类型必须为number且为整数 |
| float |
类型必须为number且为浮点数 |
| array |
类型必须为数组 |
| enum |
值的类型必须存在于enum中 |
| url |
类型格式必须为url格式 |
| email |
格式类型必须为email格式 |
| method |
格式类型必须为function |
| regexp |
必须是RegExp创建新时不会长生异常的实例或字符串RegExp |
| object |
格式类型必须为object |
| data |
格式类型必须为data |
| hex |
格式类型必须为hex |
| any |
格式类型可以为任何类型 |
required
值为true或false，该字段是否为必填
pattern
该属性只是一个正则表达式的值必须匹配，才可以通过验证
min
规定最小长度
max
规定最大长度
len
指定确切长度，如果该len属性与min和max范围属性结合使用，则len优先
whitespace
值为true或false，验证是否只有空格
message
校验不通过提示
asyncValidator
可以为指定的字段自定义异步校验功能
validator
可以为只能字段自定义校验功能
trigger
值为blur或change
| 值 |
说明 |
| blur |
失去焦点时触发，常用于输入框 |
| change |
手动改变时触发，常用于下拉框 |
实现过程
Element UI的规则
首先在el-form标签添加ref属性（和:model绑定的form的名称一样），添加:rules="rules"
1
2
3
| <el-form ref="form" :model="form" :rules="rules" label-width="80px">
</el-form>
|
在el-form-item标签添加prop属性（值为要验证的字段）
1
2
3
| <el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName"></el-input>
</el-form-item>
|
在JavaScript代码区的return {}内添加验证规则
1
2
3
4
5
| rules: {
userName: [
{required: true, message: "请输入用户名", trigger: "blur"}
]
}
|
在form提交的JavaScript代码内使用表单验证，$refs["form"]的form为:model对应的值
1
2
3
4
5
6
7
8
| this.$refs["form"].validate((valid, msg) => {
if (valid) {
ElementUI.Message.success("填写的信息全部正确！！");
} else {
ElementUI.Message.error("你填写的信息不正确！！");
return false;
}
});
|
完整代码如下
1
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| <template>
<div style="width: 40%;margin-left: 30%;margin-top: 6%">
<p style="text-align: center"><img src="../assets/images/logo.png" height="55"/></p>
<h3 style="text-align: center">学生注册</h3>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName"></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 label="确认密码" prop="password2">
<el-input v-model="form.password2" type="password"></el-input>
</el-form-item>
<el-form-item style="text-align: center">
<el-button type="primary" @click="onSubmit()">注册</el-button>
<router-link type="primary" to="/login">
<el-button type="primary">登录</el-button>
</router-link>
</el-form-item>
</el-form>
</div>
</template>
<script>
import ElementUI from 'element-ui';
import axios from "axios";
export default {
name: "register",
data() {
return {
form: {
userName: '',
password: '',
password2: ''
},
rules: {
userName: [
{required: true, message: "请输入用户名", trigger: "blur"}
]
}
}
},
methods: {
onSubmit() {
this.$refs["form"].validate((valid, msg) => {
if (valid) {
ElementUI.Message.success("填写的信息全部正确！！");
} else {
ElementUI.Message.error("你填写的信息不正确！！");
return false;
}
});
}
}
}
</script>
<style scoped>
</style>
|
自定义规则
在JavaScript代码区内data() {}编写自己的验证规则
1
2
3
4
5
6
7
8
|
let checkPassword2 = (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('密码和确认密码不一致!'));
} else {
callback();
}
};
|
在rules: {}内的要验证的字段中引用
1
2
3
4
| password2: [
{required: true, message: "请输入确认密码", trigger: "blur"},
{validator: checkPassword2, trigger: 'blur'}
]
|
完整代码如下：
1
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <template>
<div style="width: 40%;margin-left: 30%;margin-top: 6%">
<p style="text-align: center"><img src="../assets/images/logo.png" height="55"/></p>
<h3 style="text-align: center">学生注册</h3>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName"></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 label="确认密码" prop="password2">
<el-input v-model="form.password2" type="password"></el-input>
</el-form-item>
<el-form-item style="text-align: center">
<el-button type="primary" @click="onSubmit()">注册</el-button>
<router-link type="primary" to="/login">
<el-button type="primary">登录</el-button>
</router-link>
</el-form-item>
</el-form>
</div>
</template>
<script>
import ElementUI from 'element-ui';
import axios from "axios";
export default {
name: "register",
data() {
let checkUserName = (rule, value, callback) => {
let param = new URLSearchParams();
param.append("userName", value);
axios
.post('http://localhost/user/findByUserName', param)
.then(function (response) {
if (response.data.success) {
callback();
} else {
callback(new Error('用户名已经存在,请重新输入!'));
}
})
.catch(function (error) {
alert(error);
console.log(error);
});
};
let checkPassword2 = (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('密码和确认密码不一致!'));
} else {
callback();
}
};
return {
form: {
userName: '',
password: '',
password2: ''
},
rules: {
userName: [
{required: true, message: "请输入用户名", trigger: "blur"},
{validator: checkUserName, trigger: 'blur'}
],
password: [
{required: true, message: "请输入密码", trigger: "blur"}
],
password2: [
{required: true, message: "请输入确认密码", trigger: "blur"},
{validator: checkPassword2, trigger: 'blur'}
]
}
}
},
methods: {
onSubmit() {
this.$refs["form"].validate((valid, msg) => {
if (valid) {
ElementUI.Message.success("填写的信息全部正确！！");
} else {
ElementUI.Message.error("你填写的信息不正确！！");
return false;
}
});
}
}
}
</script>
<style scoped>
</style>
|
