杰晶网络

Vue中常用rules校验规则(实例代码)
网络编程 2025/11/4 佚名
3 2

在 vue开发中，难免遇到各种表单校验，这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出，后期不断补充更新。

1、是否合法IP地址

export function validateIP(rule, value,callback) {
 if(value==''||value==undefined||value==null){
 callback();
 }else {
 const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
 if ((!reg.test(value)) && value != '') {
 callback(new Error('请输入正确的IP地址'));
 } else {
 callback();
 }
 }
}

2、是否手机号码或者固话 

export function validatePhoneTwo(rule, value, callback) {
 const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
 if (value == '' || value == undefined || value == null) {
 callback();
 } else {
 if ((!reg.test(value)) && value != '') {
 callback(new Error('请输入正确的电话号码或者固话号码'));
 } else {
 callback();
 }
 }
}

3、是否固话

export function validateTelphone(rule, value,callback) {
 const reg =/0\d{2,3}-\d{7,8}/;
 if(value==''||value==undefined||value==null){
 callback();
 }else {
 if ((!reg.test(value)) && value != '') {
 callback(new Error('请输入正确的固定电话）'));
 } else {
 callback();
 }
 }
}

4、是否手机号码

export function validatePhone(rule, value,callback) {
 const reg =/^[1][3-9][0-9]{9}$/;
 if(value==''||value==undefined||value==null){
 callback();
 }else {
 if ((!reg.test(value)) && value != '') {
 callback(new Error('请输入正确的电话号码'));
 } else {
 callback();
 }
 }
}

5、是否身份证号码 

export function validateIdNo(rule, value,callback) {
 const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
 if(value==''||value==undefined||value==null){
 callback();
 }else {
 if ((!reg.test(value)) && value != '') {
 callback(new Error('请输入正确的身份证号码'));
 } else {
 callback();
 }
 }
}

6、是否邮箱 

export function validateEMail(rule, value,callback) {
 const reg =/^([a-zA-Z0-9]+[-_\.]"htmlcode">



export function validateURL(url) {
 const urlregex = /^(https"htmlcode">



export function isPassword(rule, value, callback) {
 const reg =/^[_a-zA-Z0-9]+$/;
 if(value==''||value==undefined||value==null){
 callback();
 } else {
 if (!reg.test(value)){
 callback(new Error('仅由英文字母，数字以及下划线组成'));
 } else {
 callback();
 }
 }
}





9、自动检验数值的范围





export function checkMax20000(rule, value, callback) {
 if (value == '' || value == undefined || value == null) {
 callback();
 } else if (!Number(value)) {
 callback(new Error('请输入[1,20000]之间的数字'));
 } else if (value < 1 || value > 20000) {
 callback(new Error('请输入[1,20000]之间的数字'));
 } else {
 callback();
 }
}





10、验证数字输入框最大数值





export function checkMaxVal(rule, value,callback) {
 if (value < 0 || value > 最大值) {
 callback(new Error('请输入[0,最大值]之间的数字'));
 } else {
 callback();
 }
}





11、验证是否1-99之间





export function isOneToNinetyNine(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 }
 setTimeout(() => {
 if (!Number(value)) {
 callback(new Error('请输入正整数'));
 } else {
 const re = /^[1-9][0-9]{0,1}$/;
 const rsCheck = re.test(value);
 if (!rsCheck) {
 callback(new Error('请输入正整数，值为【1,99】'));
 } else {
 callback();
 }
 }
 }, 0);
}







12、验证是否整数







export function isInteger(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 }
 setTimeout(() => {
 if (!Number(value)) {
  callback(new Error('请输入正整数'));
 } else {
  const re = /^[0-9]*[1-9][0-9]*$/;
  const rsCheck = re.test(value);
  if (!rsCheck) {
  callback(new Error('请输入正整数'));
  } else {
  callback();
  }
 }
 }, 0);
}








13、验证是否整数,非必填







export function isIntegerNotMust(rule, value, callback) {
 if (!value) {
 callback();
 }
 setTimeout(() => {
 if (!Number(value)) {
  callback(new Error('请输入正整数'));
 } else {
  const re = /^[0-9]*[1-9][0-9]*$/;
  const rsCheck = re.test(value);
  if (!rsCheck) {
  callback(new Error('请输入正整数'));
  } else {
  callback();
  }
 }
 }, 1000);
}








14、 验证是否是[0-1]的小数







export function isDecimal(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 }
 setTimeout(() => {
 if (!Number(value)) {
  callback(new Error('请输入[0,1]之间的数字'));
 } else {
  if (value < 0 || value > 1) {
  callback(new Error('请输入[0,1]之间的数字'));
  } else {
  callback();
  }
 }
 }, 100);
}








15、 验证是否是[1-10]的小数,即不可以等于0







export function isBtnOneToTen(rule, value, callback) {
 if (typeof value == 'undefined') {
 return callback(new Error('输入不可以为空'));
 }
 setTimeout(() => {
 if (!Number(value)) {
  callback(new Error('请输入正整数，值为[1,10]'));
 } else {
  if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) {
  callback(new Error('请输入正整数，值为[1,10]'));
  } else {
  callback();
  }
 }
 }, 100);
}








16、验证是否是[1-100]的小数,即不可以等于0







export function isBtnOneToHundred(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 }
 setTimeout(() => {
 if (!Number(value)) {
  callback(new Error('请输入整数，值为[1,100]'));
 } else {
  if (value < 1 || value > 100) {
  callback(new Error('请输入整数，值为[1,100]'));
  } else {
  callback();
  }
 }
 }, 100);
}








17、验证是否是[0-100]的小数







export function isBtnZeroToHundred(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 }
 setTimeout(() => {
 if (!Number(value)) {
  callback(new Error('请输入[1,100]之间的数字'));
 } else {
  if (value < 0 || value > 100) {
  callback(new Error('请输入[1,100]之间的数字'));
  } else {
  callback();
  }
 }
 }, 100);
}








18、验证端口是否在[0,65535]之间







export function isPort(rule, value, callback) {
 if (!value) {
 return callback(new Error('输入不可以为空'));
 }
 setTimeout(() => {
 if (value == '' || typeof(value) == undefined) {
  callback(new Error('请输入端口值'));
 } else {
  const re = /^([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])$/;
  const rsCheck = re.test(value);
  if (!rsCheck) {
  callback(new Error('请输入在[0-65535]之间的端口值'));
  } else {
  callback();
  }
 }
 }, 100);
}








19、验证端口是否在[0,65535]之间，非必填,isMust表示是否必填







export function isCheckPort(rule, value, callback) {
 if (!value) {
 callback();
 }
 setTimeout(() => {
 if (value == '' || typeof(value) == undefined) {
  //callback(new Error('请输入端口值'));
 } else {
  const re = /^([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])$/;
  const rsCheck = re.test(value);
  if (!rsCheck) {
  callback(new Error('请输入在[0-65535]之间的端口值'));
  } else {
  callback();
  }
 }
 }, 100);
}








20、小写字母





export function validateLowerCase(val) {
 const reg = /^[a-z]+$/;
 return reg.test(val);
}







22、两位小数验证





const validateValidity = (rule, value, callback) => {
 if (!/(^[1-9]([0-9]+)"htmlcode">



export function validateUpperCase(val) {
 const reg = /^[A-Z]+$/;
 return reg.test(val);
}







24、是否大小写字母





export function validatAlphabets(val) {
 const reg = /^[A-Za-z]+$/;
 return reg.test(val);
}







25、密码校验





export const validatePsdReg = (rule, value, callback) => {
 if (!value) {
 return callback(new Error('请输入密码'))
 }
 if (!/^("htmlcode">



export const validateContacts = (rule, value, callback) => {
 if (!value) {
 return callback(new Error('请输入中文'))
 }
 if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
 callback(new Error('不可输入特殊字符'))
 } else {
 callback()
 }
}







27、身份证校验





export const ID = (rule, value, callback) => {
 if (!value) {
  return callback(new Error('身份证不能为空'))
 }
 if (! /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
  callback(new Error('请输入正确的二代身份证号码'))
 } else {
  callback()
 }
}







28、 账号校验





export const validateCode = (rule, value, callback) => {
 if (!value) {
 return callback(new Error('请输入账号'))
 }
 if (!/^("htmlcode">



export const validateNumber = (rule, value, callback) => {
 let numberReg = /^\d+$|^\d+[.]"htmlcode">



const onePoint = (rule, value, callback) => {
 if (!/^[0-9]+([.]{1}[0-9]{1})"color: #ff0000">总结


以上所述是小编给大家介绍的Vue中常用rules校验规则，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！


                                

                                

                                     

                                

                                    标签：
                                        
vue,rules校验,vue,校验规则

                                     

                            

                        

                        

                            

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        

                            

                                
                                
                                    评论“Vue中常用rules校验规则(实例代码)”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无“Vue中常用rules校验规则(实例代码)”评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.imxmx.com
                                            
                                                杰晶网络 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            120,141站长资源
                                        

                                    

                                

                            

                            
                            
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/11/4

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网