Vue(二)--- 表单验证
Vue中表单数据的验证方法<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="50px" class="demo-loginForm"><el-form-item label="账号" prop="userAccount"><el-input type=
·
Vue中表单数据的验证方法
<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="50px" class="demo-loginForm">
<el-form-item label="账号" prop="userAccount">
<el-input type="text" v-model="loginForm.userAccount" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item class="loginBtn">
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
rules是我们绑定的数据检验规则,使用validator检验器,定义在data函数的return 之外。
trigger: ‘blur’ 设定为失去焦点时开始检验。
标签中的prop属性要和rules中的key值相同。
data() {
var validateUserAccount = (rule, value, callback) => {
/**
* 账号默认是学号,12位数字值
*/
let reg = /^20\d{10}$/
if (!value) {
callback(new Error("请输入账号"))
}else{
if(value.length<12){
callback(new Error('账号输入少了'))
}else if(value.length>12){
callback(new Error('账号输入多了'))
}
else if(!reg.test(value)) {
callback(new Error('账号类型错误'))
} else {
/**
* 本地检测没有格式问题之后,
* axios/ajax 后端数据库查询,检测用户是否存在
*/
callback()
}
}
};
var validatePassword = (rule, value, callback) => {
/**
* 只检测是否输入,没有格式要求
*/
if (!value) {
callback(new Error("请输入密码"))
} else {
callback()
}
};
return {
loginForm: {
userAccount: '',
password: '',
},
rules: {
userAccount: [
{ validator: validateUserAccount, trigger: 'blur' }
],
password: [
{ validator: validatePassword, trigger: 'blur' }
]
}
}
}
要求在点击登录按钮时实现自动的数据检验,放置没有输入数据,直接点击登录按钮
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
//valid是检验的结果,bool值
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)