今天使用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>
那么晚安披摄、
