今天使用element的rules功能时遇到个无法验证问题,无法获取到input框的值,由于我是使用全局的表单验证加组件自身的方法去使用,所以一直以为是我代码问题,然而检查到一半去看官方例子时发现prop和form表单里面的v-model里面名字一样,,,,改名使用OK!!!!
上代码
-这一块是全局验证的代码
// 用户名 字母数字组成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('请填写用户名'))
} else if (!reg.test(value)) {
return callback(new Error('用户名格式错误'))
} else {
callback()
}
}
// 密码 字母数字组成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('请填写密码'))
} else if (!reg.test(value)) {
return callback(new Error('用户名格式错误'))
} else {
callback()
}
}
export default {
// 常用登录 6-16字母数字组合
logName: [{ required: true, validator: userNameRE, trigger: 'blur' }],
// 常用密码 6-16字母数字组合
logPwd: [{ required: true, validator: passwordRE, trigger: 'blur' }]
}
- 这一块是组件代码 prop里面的值
prop="username"
必须和v-model="ruleForm.username"
form对象里面的值一样。
<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="确认密码" v-if = "type === 'register'" prop="re_password" :rules="rules2.re_password">
<el-input type="password" placeholder="确认密码" v-model="ruleForm.re_password" ></el-input>
</el-form-item>
</el-form>
<el-button type="primary" v-if = "type === 'register'" @click="signup()">注册</el-button>
<el-button type="primary" v-else @click="login('ruleForm')">登录</el-button>
<router-link to="/login" v-show = "type === 'register'" tag="p">已有账号,去登录</router-link>
<router-link to="/register" v-show = "type === 'login'" tag="p">没有账号,去注册</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('请再次输入密码'));
} 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>
那么晚安、