本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码，供大家参考，具体内容如下
登录注册表单验证
通过Element-ui的表单实现登录注册的表单验证
效果图如下
注册
登录表单
登录的实现，需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求
|
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
|
// 登录表单验证的代码// template的代码<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item prop="user"> <el-input type="text" placeholder="请输入手机号或者邮箱号" required="required" v-model="ruleForm.user" prefix-icon="el-icon-user-solid" ></el-input> </el-form-item> <el-form-item prop="pass"> <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="ruleForm.pass" @keyup.enter.native="toSubmitForm('ruleForm')" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button> </el-form-item> </el-form>//script的代码// 两个验证，验证密码不能为空，验证，手机号或者邮箱是否符合要求data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')) } else { callback() } } var validateUser = (rule, value, callback) => { if (value === '') { callback(new Error('手机号或者邮箱不能为空')) } else { const reg = /^1[3|4|5|7|8][0-9]\d{8}$/ // eslint-disable-next-line no-useless-escape const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ if ((reg.test(value) || reg2.test(value))) { callback() } else { callback(new Error('请输入正确的手机号或者邮箱')) } } } return { // 获取url地址后面的参数 urlQuery: '', activeIndex: '1', ruleForm: { pass: '', user: '' }, rules: { user: [{ required: true, validator: validateUser, trigger: 'blur' }], pass: [{ required: true, validator: validatePass, 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
//注册表单的代码<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item prop="user1"> <el-input type="text" placeholder="用户名" required="required" v-model="ruleForm.user1" prefix-icon="el-icon-user-solid"></el-input> </el-form-item> <el-form-item prop="pass1"> <el-input class="phone-input" placeholder="手机号/邮箱" v-model="ruleForm.pass1" prefix-icon="el-icon-mobile-phone"></el-input> </el-form-item> <el-form-item prop="code" class="phone" v-show="yzmshow"> <el-input v-model="ruleForm.code" placeholder="验证码" :minlength="6" :maxlength="6"></el-input> <el-button type="primary" @click="getCode()" class="code-btn" :disabled="!show"> <span v-show="show">发送验证码</span> <span v-show="!show" class="count">{{ count }} s</span> </el-button> </el-form-item> <el-form-item prop="pass"> <el-input type="password" placeholder="请输入密码" v-model="ruleForm.pass" prefix-icon="el-icon-lock"></el-input> </el-form-item> <el-form-item prop="checkPass"> <el-input type="password" placeholder="请再次输入密码" v-model="ruleForm.checkPass" prefix-icon="el-icon-lock"></el-input> </el-form-item> <el-form-item class="btn-form"> <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button> <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> --> </el-form-item> </el-form>// script中data()的代码data() { var validateUser1 = async (rule, value, callback) => { if (value === '') { callback(new Error('请输入用户名')) } else { if (value) { const res = await request.post('/api/user/checkUsernameExist', { username: this.ruleForm.user1 }) console.log(res) if (res.data.code === 20000) { callback() } else { return callback(new Error('该用户名已经被注册')) } } } } var validatePass1 = async (rule, value, callback) => { if (value === '') { callback(new Error('手机号或者邮箱不能为空')) } else { const reg = /^1[3|4|5|7|8][0-9]\d{8}$/ // eslint-disable-next-line no-useless-escape const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ if ((reg.test(value) || reg2.test(value))) { this.yzmshow = true callback() } else { callback(new Error('请输入正确的手机号或者邮箱')) } } } var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')) } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass') } callback() } } var validateCode = (rule, value, callback) => { if (value === '') { callback(new Error('请输入验证码')) } else { if (this.ruleForm.code.length === 6) { callback() } else { callback(new Error('验证码不正确')) } } } var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')) } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')) } else { callback() } } return { activeIndex: '2', loginForm: { mobile: '', code: '', zheCode: '' }, show: true, count: '', timer: null, yzmshow: false, ruleForm: { user1: '', pass1: '', pass: '', checkPass: '', zhecode: '', mobile: '', phoneCode: '', emailCode: '', code: '' }, rules: { code: [{ required: true, validator: validateCode, trigger: 'blur' }, { min: 6, max: 6, message: '长度为6', trigger: 'blur' } ], user1: [{ required: true, validator: validateUser1, trigger: 'blur' }], pass1: [{ required: true, validator: validatePass1, trigger: 'blur' }], // 密码 pass: [{ required: true, validator: validatePass, trigger: 'blur' }, { min: 6, message: '长度在不少于6个字符', trigger: 'blur' } ], // 校验密码 checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }, { min: 6, message: '长度在不少于6个字符', trigger: 'blur' } ] } } }, |
需要验证手机号或者邮箱是否符合要求，如果符合的话显示验证码
点击发送验证码进行60s倒计时，在倒计时中，不能再发送验证码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45939191/article/details/107323340
