微客导航 » 文章资讯 » vue form check 表单验证的实现代码

vue form check 表单验证的实现代码

2023-09-04 16:56:05 326

vue-form-check （基于vue的表单验证）具体实现代码如下所述：

安装

//安装
npmivue-form-check-S

引用

//引用(eg.在工程的main.js下)
importvueFormCheckfrom'vue-form-check'
Vue.use(vueFormCheck)

调用

this.$checkForm(current,config)
@params
current是当前校验对象
config是校验规则对象
config.alias别名
config.type配置项数据类型
config.required是否必填
config.rule正则校验
config.depend先决条件（省事可以在callback里直接判断，推荐写，true校验本项；false不校验本项）
config.callback灵活校验（rule同时出现，只处理callback，参数是当前值，true校验通过；false校验不通过）
@returnobject对象
不通过的话{alias:'电话',type:'rule'}alias是配置的别名，type可以是['type'|'required'|'rule']
校验通过的话{}空对象
ps.验证表单可以写在mixin里，这里简单处理直接写在组件里了

Component

//使用例子
newVue({
data(){
return{
params:{
id:'1234',
person:{
name:'jackie',
age:'27',
phone:'18266666666',
home:['罗湖区田心村']
}
}
}
},
methods:{
submit(){
//...
console.log('submitsuccess');
},
check(){
letobj=this.$checkForm(this.params,{
id:{
alias:'id',
type:'string'
},
//必填校验
'person.name':{
alias:'学校',
type:'string',
required:true
},
//正则校验
'person.phone':{
alias:'电话',
type:'string',
rule:/^1[345678][0-9]{9}$/
},
//灵活校验，如数值、日期区间验证
'person.age':{
alias:'年龄',
callback(value){
if(value<30&&value>18){
returntrue;
}
returnfalse;
}
},
//先决校验，如果电话等于以下，校验地址信息
'person.home':{
alias:'方向',
type:'array',
required:true,
depend(){
if(this.params.person.phone==='18210517463'){
returntrue;
}
returnfalse;
}
}
});
constlength=Object.keys(obj).length;
if(length===0){
returnthis.submit();
}
switch(obj.type){
case'type':
this.$alert(`${obj.alias}的类型定义错误`,'提示');
break;
case'required':
this.$alert(`${obj.alias}是必填项`,'提示');
break;
case'rule':
this.$alert(`${obj.alias}的输入不符合规范`,'提示');
break;
default:
break;
}
}
}
});

补充：vue-form表单验证是否为空值

重点部分：

点击表单的submit按钮触发form部分@submit=”submit”事件：

submit事件定义在js部分：

prevent：文档上说了在事件后面加上.prevent就可以阻止默认事件了。

form@submit.prevent=”submit”





girl

请选择一个导购： {{guild.name}}

data(){ return{ userName:'',//请输入你的姓名 selectedSex:'',//选择性别 phoneNumber:'',//请输入你的手机号 guilds:[], selectedGuild:''///请选择一个导购 } }, methods:{ //1.重点是这个方法submit(){}-form@submit.prevent="submit"-重点是这个方法submit(){}, //2.可以在这里向服务器发送数据 submit(){ if(!this.userName){ showToast('请输入姓名!') returnfalse } if(!this.phoneNumber){ showToast('请输入手机号码!') returnfalse } if(!checkTel(this.phoneNumber)){ showToast('手机号格式不正确') returnfalse } if(!this.selectedGuild){ showToast('请选择导购!') returnfalse } returntrue } }

总结

以上所述是小编给大家介绍的vueformcheck表单验证的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue form check 表单验证的实现代码

热门推荐

随机推荐