在vue项目中使用Element-ui如何制作一个注册登录表单-创新互联

在vue项目中使用Element-ui如何制作一个注册登录表单？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联公司主营乌达网站建设的网络公司,主营网站建设方案,app软件定制开发,乌达h5成都小程序开发搭建,乌达网站营销推广欢迎乌达等地区企业咨询

登录注册表单验证

通过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' }]
  }
  }
 },

网页标题：在vue项目中使用Element-ui如何制作一个注册登录表单-创新互联
分享链接：http://6mz.cn/article/hohsc.html