本文例項為大家分享了vue+Element-ui實現登入登錄檔單的具體程式碼，供大家參考，具體內容如下

登入登錄檔單驗證

通過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,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,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,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,callback) => {
 if (value === '') {
  callback(new Error('請輸入密碼'))
 } else {
  if (this.ruleForm.checkPass !== '') {
  this.$refs.ruleForm.validateField('checkPass')
  }
  callback()
 }
 }
 var validateCode = (rule,callback) => {
 if (value === '') {
  callback(new Error('請輸入驗證碼'))
 } else {
  if (this.ruleForm.code.length === 6) {
  callback()
  } else {
  callback(new Error('驗證碼不正確'))
  }
 }
 }
 var validatePass2 = (rule,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,// 密碼
  pass: [{
  required: true,message: '長度在不少於6個字元',// 校驗密碼
  checkPass: [{
  required: true,validator: validatePass2,trigger: 'blur'
  }
  ]
 }
 }
 },

需要驗證手機號或者郵箱是否符合要求，如果符合的話顯示驗證碼

點擊發送驗證碼進行60s倒計時，在倒計時中，不能再發送驗證碼

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。