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 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 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中date与gmdate的区别及默认时区设置
2014/05/12 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
讲解Python中fileno()方法的使用
2015/05/24 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python 实现简单的FTP程序
2019/12/27 Python
python脚本和网页有何区别
2020/07/02 Python
浅析NumPy 切片和索引
2020/09/02 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
《老王》教学反思
2014/02/23 职场文书
二手房购房意向书范本
2014/04/01 职场文书
安全先进班组材料
2014/12/26 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
医生个人年终总结
2015/02/28 职场文书
行政复议决定书
2015/06/24 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
vue判断按钮是否可以点击
2022/04/09 Vue.js
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python