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 相关文章推荐
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
js命名空间写法示例
Dec 18 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
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数组中包含中文的排序方法
2014/06/03 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python和Go语言的区别总结
2019/02/20 Python
如何更优雅地写python代码
2019/07/02 Python
Python flask框架post接口调用示例
2019/07/03 Python
python递归下载文件夹下所有文件
2019/08/31 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
区级文明单位申报材料
2014/05/15 职场文书
公司合并协议书范本
2014/09/30 职场文书
怎样写辞职信
2015/02/27 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
创业计划书之农家乐
2019/10/09 职场文书