在vue項目中使用Element-ui如何制作一個注冊登錄表單？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)公司主營烏達網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件定制開發(fā),烏達h5成都小程序開發(fā)搭建,烏達網(wǎng)站營銷推廣歡迎烏達等地區(qū)企業(yè)咨詢

登錄注冊表單驗證

通過Element-ui的表單實現(xiàn)登錄注冊的表單驗證

效果圖如下

注冊

登錄表單

登錄的實現(xiàn)，需要通過手機號或者郵箱進行登錄,驗證手機號或者郵箱符合要求

// 登錄表單驗證的代碼
// 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地址后面的參數(shù)
  urlQuery: '',
  activeIndex: '1',
  ruleForm: {
   pass: '',
   user: ''
  },
  rules: {
   user: [{ required: true, validator: validateUser, trigger: 'blur' }],
   pass: [{ required: true, validator: validatePass, trigger: 'blur' }]
  }
  }
 },

網(wǎng)站欄目：在vue項目中使用Element-ui如何制作一個注冊登錄表單-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://weahome.cn/article/hohsc.html