您的位置:首页 > Web前端 > Vue.js

vue如何使用rules对表单字段进行校验

2018-08-23 17:06 781 查看
基于element-ui

1、在代码中,添加属性::rule

<el-form:model="form":rules="rules"ref="form"label-width="150px"></el-form> 并且,在<el-form-item>中添加prop属性,对应rules中的规则




2、新开一个文件夹(validate.js)定义验证规则



3、在页面(index.vue)中引入验证规则定义的文件,并在exportdefault中定义rule规则,使用语法:{validator:验证方法,trigger:验证触发}

  


3、以下是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);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐