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


Posted in Javascript onNovember 17, 2020

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

登录注册表单验证

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

效果图如下

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

注册

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

登录表单

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

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

注册表单验证

注册表单的实现,注册有用户名,以及通过手机或者邮箱获取验证码,之后输入密码,且需要再次确认密码是否一致

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

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

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
jQuery 选择器详解
Jan 19 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
vue.js表格分页示例
Oct 18 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
Vue+Element-U实现分页显示效果
Nov 15 #Javascript
vue+Element-ui前端实现分页效果
Nov 15 #Javascript
vue+Element-ui实现分页效果
Nov 15 #Javascript
vue实现抽屉弹窗效果
Nov 15 #Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 #Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 #Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
You might like
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python编程实现希尔排序
2017/04/13 Python
Python使用django搭建web开发环境
2017/06/09 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python中作用域的深入讲解
2018/12/10 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python按钮的响应事件详解
2019/03/04 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
酒店个人求职信范文
2014/01/25 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年教研工作总结
2015/05/23 职场文书
高三物理教学反思
2016/02/20 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS