vue+Element-ui实现登录注册表单

本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码，供大家参考，具体内容如下

登录注册表单验证

通过Element-ui的表单实现登录注册的表单验证

效果图如下

注册

登录表单

登录的实现，需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求

// 登录表单验证的代码
// template的代码

  
  
  
  
  
  
  
  登录
  
 
//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'
 }
 ]
 }
 }
 },

需要验证手机号或者邮箱是否符合要求，如果符合的话显示验证码

点击发送验证码进行60s倒计时，在倒计时中，不能再发送验证码

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。