详解vue如何使用rules对表单字段进行校验
1、在代码中,添加属性::rule
2.新建一个文件(validate.js)定义验证规则
/**这个文件只允许放表单验证方法**/
//验证手机号
exportfunctionisPhone(rule,value,callback){
if(!value){
returncallback(newError('输入不可以为空'));
}
varpattern=/^1[34578]\d{9}$/
if(pattern.test(value)){
returncallback()
}
returncallback(newError('输入的手机号错误'))
}
3、在页面(xx.vue)中引入验证规则定义的文件,并在exportdefault中定义rule规则,使用语法:{validator:验证方法,trigger:验证触发}validator
rules:{
phone:[
{required:true,message:'手机号不能为空',trigger:'blur'},
{type:'string',min:11,message:'手机号不允许小于11位',trigger:'blur'},
{validator:isPhone,trigger:'blur'},
],
password:[
{required:true,message:'密码不能为空',trigger:'blur'},
{type:'string',min:6,message:'密码不允许小于6位',trigger:'blur'},
],
code:[
{required:true,message:'验证码不能为空',trigger:'blur'},
{type:'string',min:4,message:'验证码必须是4位',trigger:'blur'},
],
},
以下是validator.js文件的部分验证方法
/*是否是公司邮箱*/
exportfunctionisWscnEmail(str){
constreg=/^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
returnreg.test(str.trim());
}
/*合法uri*/
exportfunctionvalidateURL(textval){
consturlregex=/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
returnurlregex.test(textval);
}
//验证是否整数
exportfunctionisInteger(rule,value,callback){
if(!value){
returncallback(newError('输入不可以为空'));
}
setTimeout(()=>{
if(!Number(value)){
callback(newError('请输入正整数'));
}else{
constre=/^[0-9]*[1-9][0-9]*$/;
constrsCheck=re.test(value);
if(!rsCheck){
callback(newError('请输入正整数'));
}else{
callback();
}
}
},1000);
}
//验证是否是[0-1]的小数
exportfunctionisDecimal(rule,value,callback){
if(!value){
returncallback(newError('输入不可以为空'));
}
setTimeout(()=>{
if(!Number(value)){
callback(newError('请输入数字'));
}else{
if(value<0||value>1){
callback(newError('请输入[0,1]之间的数字'));
}else{
callback();
}
}
},1000);
}
//验证端口是否在[0,65535]之间
exportfunctionisPort(rule,value,callback){
if(!value){
returncallback(newError('输入不可以为空'));
}
setTimeout(()=>{
if(value==''||typeof(value)==undefined){
callback(newError('请输入端口值'));
}else{
constre=/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
constrsCheck=re.test(value);
if(!rsCheck){
callback(newError('请输入在[0-65535]之间的端口值'));
}else{
callback();
}
}
},1000);
}
/*小写字母*/
exportfunctionvalidateLowerCase(str){
constreg=/^[a-z]+$/;
returnreg.test(str);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。