本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码，供大家参考，具体内容如下登录注册表单验证登录注册表单验证通过Element-ui的表单实现登录注册的表单验证效果图如下注册注册登录表单登录表单登录的实现，需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求
// 登录表单验证的代码
// template的代码

:model="ruleForm"

:rules="rules"

ref="ruleForm"

label-width="100px"

class="demo-ruleForm"

>




type="text"

placeholder="请输入手机号或者邮箱号"

required="required"

v-model="ruleForm.user"

prefix-icon="el-icon-user-solid"

>






type="password"

placeholder="请输入密码"

prefix-icon="el-icon-lock"

v-model="ruleForm.pass"

@keyup.enter.native="toSubmitForm('ruleForm')"

>





登录



//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' }]
}
}
},
// 登录表单验证的代码
// template的代码

:model="ruleForm"

:rules="rules"

ref="ruleForm"

label-width="100px"

class="demo-ruleForm"

>




type="text"

placeholder="请输入手机号或者邮箱号"

required="required"

v-model="ruleForm.user"

prefix-icon="el-icon-user-solid"

>






type="password"

placeholder="请输入密码"

prefix-icon="el-icon-lock"

v-model="ruleForm.pass"

@keyup.enter.native="toSubmitForm('ruleForm')"

>





登录



//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' }]
}
}
},注册表单验证
注册表单验证注册表单的实现，注册有用户名，以及通过手机或者邮箱获取验证码，之后输入密码，且需要再次确认密码是否一致
//注册表单的代码










发送验证码
{{ count }} s









注册



// 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'
}
]
}
}
},
//注册表单的代码










发送验证码
{{ count }} s









注册



// 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倒计时，在倒计时中，不能再发送验证码关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。vue.js组件学习教程vue学习教程请阅读专题《vue实战教程》《vue实战教程》以上就是本文的全部内容，希望对大家的学习有所帮助。