在vue項(xiàng)目中使用Element-ui如何制作一個(gè)注冊登錄表單-創(chuàng)新互聯(lián)

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

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

登錄注冊表單驗(yàn)證

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

效果圖如下

注冊

登錄表單

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

// 登錄表單驗(yàn)證的代碼
// 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="請輸入手機(jī)號或者郵箱號"
    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的代碼
// 兩個(gè)驗(yàn)證，驗(yàn)證密碼不能為空，驗(yàn)證，手機(jī)號或者郵箱是否符合要求
data() {
  var validatePass = (rule, value, callback) => {
  if (value === '') {
   callback(new Error('請輸入密碼'))
  } else {
   callback()
  }
  }
  var validateUser = (rule, value, callback) => {
  if (value === '') {
   callback(new Error('手機(jī)號或者郵箱不能為空'))
  } 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('請輸入正確的手機(jī)號或者郵箱'))
 }
  }
  }
  return {
  // 獲取url地址后面的參數(shù)
  urlQuery: '',
  activeIndex: '1',
  ruleForm: {
   pass: '',
   user: ''
  },
  rules: {
   user: [{ required: true, validator: validateUser, trigger: 'blur' }],
   pass: [{ required: true, validator: validatePass, trigger: 'blur' }]
  }
  }
 },

本文題目：在vue項(xiàng)目中使用Element-ui如何制作一個(gè)注冊登錄表單-創(chuàng)新互聯(lián)
鏈接分享：http://bm7419.com/article32/hohsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、企業(yè)建站、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)