前言
最近做项目用到vue的validator验证,思量了一下发现这个验证用到的地方还挺多的,特别是登陆注册表单验证和一些复杂的业务表单提交,现在趁着工作有空就记录一下自己的思路
一、表单验证el-form、rule
表单验证的功能要配合绑定rules的验证规则才有效的
表单的代码如下(示例):
<el-form
class="form"
@submit.native.prevent
ref="form"
size="mini"
:rules="formRules"
:model="formData">
<el-form-item prop="name" label="账号名">
<el-input v-model.trim="formData.name"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model.trim="formData.password" ></el-input>
</el-form-item>
<el-form-item prop="confirm" label="密保指令">
<el-input type="textarea" v-model="formData.confirm" ></el-input>
</el-form-item>
</el-form>
二、rules中使用validator
这里的话可以有两种写法
写法一,一般写法这样的:
data() {
//rule表示要验证的规则,value表示输入值,callback回调
var validatorFn = (rule, value, callback) => {
let Reg =/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;//正则表达式验证例子
if (!value) {
callback();//如果输入为空直接返回
} else {
if (Reg.test(value)) { //匹配成功返回
callback();
} else { //匹配不成功返回错误显示
callback(new Error("错误提示"));
}
}
};//以上validatorFn为写法的参考
var validatorName = (rule,value,callback) =>{
let NameReg = /[0-9a-zA-Z]{1,20}$/
if (value && value.length!== 0 && !NameReg.test(value)) {
callback('登录账号支持字母、数字组合')
} else {
callback(new Error("错误提示"))
}
};
var validatorPassword = (rule, value, callback) => {
if (value.length >= 8 && value.length <= 16) {
if (/[0-9]/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value) && /^[A-Za-z0-9]+$/.test(value)) {
callback()
}
callback(new Error('密码必须是大写字母+小写字母+数字组合'))
} else {
callback(new Error('密码必须是8-16位'))
}
}
var validatorConfirm = (rule,value,callback)=>{
if(value){
let confirmArr=value.split('\n').map(item=>item.trim()).filter(item=>item!='')
for(let item of confirmArr){
let reg=/[0-9a-zA-Z]{1,20}$/
if(!reg.test(item)){
callback('请输入正确的令牌指令')
return;
}
}
callback()
}
callback()
};
return {
formData: {},
formRules: {
name: [
{ validator: validatorName, trigger: "blur" },
],
password: [
{ validator: validatorPassword,trigger: "blur" },
],
confirm: [
{ required: true, message: '请输入令牌指令', trigger: 'blur' },
{ validator: validatorConfirm,trigger: "blur" },
],
},
};
},
methods:{
submit() {
this.$refs.form.validate((valid) => {
if (!valid) {
this.$message({
message: '请修改正确的格式',
type: 'waring'
})
return;
} else {
//调用数据交互的接口
}
});
},
}
写法二-这是改变了data中rules的写法,本质上没有什么不同,看个人编码风格:
data() {
return {
formData: {},
formRules: {
name: [
{ validator: (rule,value,callback) =>{
let NameReg = /[0-9a-zA-Z]{1,20}$/
if (value && value.length!== 0 && !NameReg.test(value)) {
callback('登录账号支持字母、数字组合')
} else {
callback(new Error("错误提示"))
}
},
trigger: "blur" },
],
password: [
{ validator: (rule, value, callback) => {
if (value.length >= 8 && value.length <= 16) {
if (/[0-9]/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value) && /^[A-Za-z0- 9]+$/.test(value)) {
callback()
}
callback(new Error('密码必须是大写字母+小写字母+数字组合'))
} else {
callback(new Error('密码必须是8-16位'))
}
},
trigger: "blur" },
],
confirm: [
{ required: true, message: '请输入令牌指令', trigger: 'blur' },
{ validator:(rule,value,callback)=>{
if(value){
let confirmArr=value.split('\n').map(item=>item.trim()).filter(item=>item!='')
for(let item of confirmArr){
let reg=/[0-9a-zA-Z]{1,20}$/
if(!reg.test(item)){
callback('请输入正确的令牌指令')
return;
}
}
callback()
}
callback()
},trigger: "blur" },
],
},
};
},