踩坑element rules的表單驗(yàn)證

今天使用element的rules功能時(shí)遇到個(gè)無(wú)法驗(yàn)證問(wèn)題,無(wú)法獲取到input框的值,由于我是使用全局的表單驗(yàn)證加組件自身的方法去使用,所以一直以為是我代碼問(wèn)題,然而檢查到一半去看官方例子時(shí)發(fā)現(xiàn)prop和form表單里面的v-model里面名字一樣,,,,改名使用OK!?。?!
上代碼

-這一塊是全局驗(yàn)證的代碼

// 用戶名 字母數(shù)字組成6-16位
export function userNameRE (rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g
  if (!value) {
    return callback(new Error('請(qǐng)?zhí)顚懹脩裘?))
  } else if (!reg.test(value)) {
    return callback(new Error('用戶名格式錯(cuò)誤'))
  } else {
    callback()
  }
}

// 密碼 字母數(shù)字組成6-16位
export function passwordRE (rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/g
  if (!value) {
    return callback(new Error('請(qǐng)?zhí)顚懨艽a'))
  } else if (!reg.test(value)) {
    return callback(new Error('用戶名格式錯(cuò)誤'))
  } else {
    callback()
  }
}
export default {
  // 常用登錄  6-16字母數(shù)字組合
  logName: [{ required: true, validator: userNameRE, trigger: 'blur' }],
  // 常用密碼  6-16字母數(shù)字組合
  logPwd: [{ required: true, validator: passwordRE, trigger: 'blur' }]
}


  • 這一塊是組件代碼 prop里面的值prop="username"必須和v-model="ruleForm.username"form對(duì)象里面的值一樣。
<template>
  <el-row class="login-style">
    <h1>Demo</h1>
        <el-form :model="ruleForm" ref="ruleForm" >
         <el-form-item label="用戶名" prop="username" :rules="rules.logName">
            <el-input placeholder="用戶名" v-model="ruleForm.username" ></el-input>
         </el-form-item>

         <el-form-item label="密碼" prop="password" :rules="rules.logPwd">
            <el-input type="password" placeholder="密碼" v-model="ruleForm.password" ></el-input>
         </el-form-item>

         <el-form-item  label="確認(rèn)密碼" v-if = "type === 'register'" prop="re_password" :rules="rules2.re_password">
            <el-input type="password" placeholder="確認(rèn)密碼"  v-model="ruleForm.re_password" ></el-input>
         </el-form-item>
         
        </el-form>

    <el-button type="primary" v-if = "type === 'register'"  @click="signup()">注冊(cè)</el-button>
    <el-button type="primary" v-else @click="login('ruleForm')">登錄</el-button>
    <router-link to="/login" v-show = "type === 'register'" tag="p">已有賬號(hào),去登錄</router-link>
    <router-link to="/register" v-show = "type === 'login'" tag="p">沒(méi)有賬號(hào),去注冊(cè)</router-link>
  </el-row>
</template>

<script>
import rules from '@/utils/filter_rules'  //引入全局正則
export default {
  data () {
        var logPwd2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('兩次輸入密碼不一致!'));
            } else {
                callback();
            }
        };
    return {
            ruleForm:{
                username: '',
                password: '',
                re_password: '',
            },
            sayhub_token: '',
            rules,
            rules2:{
                re_password:[
                    { required: true,validator: logPwd2, trigger: 'blur' }
                ]
            }
    }
  },
}
</script>

那么晚安、

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容