vue.js常用的自定义校验方式
更新时间：2026年04月24日 09:43:20 作者：单人影i
文章介绍了使用ElementUI时如何自定义校验规则,包括将校验逻辑封装为JavaScript文件,通过`validator`和`trigger`属性定义校验方法和触发条件等
vue.js常用自定义校验
最好把所有的校验都写成js 然后引用.validate.js
const resultMsg = {
result: false,
message: ''
}
export function isvalidUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/* 合法uri*/
export function validateURL(textval) {
const urlregex = /^(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.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小写字母*/
export function validateLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母*/
export function validateUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母*/
export function validatAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/*判断输入的EMAIL格式是否正确 */
export function validateIsEmail(str) {
if (str.length != 0) {
const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
return reg.test(str);
}
}
/*判断输入的手机号格式是否正确 */
export function validateIsPhone(str) {
if (str.length != 0) {
const reg = /^1[0-9]{10}$/;
return reg.test(str);
}
}
/*验证价格*/
export function validatePrice(str) {
const reg = /(^[1-9]([0-9]{1,4})?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
return reg.test(str)
}
/*验证正整数*/
export function validateNum(value) {
const reg = /^[1-9][0-9]*$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入正整数';
return resultMsg;
}
/*验证4位正整数*/
export function validateNum4(value) {
const reg = /^0|[1-9][0-9]{0,3}$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字值且不大于4位';
return resultMsg;
}
/*验证5位正整数*/
export function validateNum5(value) {
const reg = /^0|[1-9][0-9]{0,4}$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字值且不大于5位';
return resultMsg;
}
/*验证1-7位数字加4位小数*/
export function validateNum7(value) {
const reg = /^(0|[1-9][0-9]{0,6})(\.[0-9]{1,4})?$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字值且不大于7位或最大四位小数';
return resultMsg;
}
/*验证1-16位数字加2位小数*/
export function validateNum16(value) {
const reg = /^(0|[1-9][0-9]{0,13})(\.[0-9]{1,2})?$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字值且不大于14位或最大两位小数';
return resultMsg;
}
/*验证1-18位数字加6位小数*/
export function validateNum18(value) {
const reg = /^(0|[1-9][0-9]{0,17})(\.[0-9]{1,6})?$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字值且不大于18位或最大六位小数';
return resultMsg;
}
/*验证9位正整数*/
export function validateNum9(value) {
const reg = /^0|[1-9][0-9]{0,9}$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字值且不大于10位';
return resultMsg;
}
/*验证12位正整数*/
export function validateNum12_6(value) {
const reg = /^(0|[1-9][0-9]{0,11})(\.[0-9]{1,6})?$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字值且不大于12位或最大六位小数';
return resultMsg;
}
//校验输入非中文 true 是中文
export function noChinese(value) {
const reg = /[\u4e00-\u9fa5]/;
resultMsg.result = reg.test(value);
resultMsg.message = '基金代码不能输入汉字!';
return resultMsg;
}
//校验输入是否是数组或点
export function inputNumberOrSpot(value) {
const reg = /^\d+(?=\.{0,1}\d+$|$)/ ;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入正确的销售服务费费率!';
return resultMsg;
}
//校验输入是否是数字（包括正负、小数点）
export function inputOrNumber(value) {
const reg = /[-+]*[0-9][.][0-9]+|[-+]*[1-9][0-9]*|^[0]$/ ;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入数字';
return resultMsg;
}
//校验输入字符是否大于6位(包含数字字母)
export function validateByte6_18(value) {
const reg = /^.{6,18}$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入至少输入6位及以上任意字符';
return resultMsg;
}
//校验输入字符是否是路径格式
export function validateUrl(value) {
const reg = /^[a-zA-Z]:(((\\(?! )[^/:*?<>\""|\\]+)+\\?)|(\\)?)\s*$/;
resultMsg.result = reg.test(value);
resultMsg.message = '请输入正确的文件路径';
return resultMsg;
}
//大写金额
export function digitUppercase(num) {
var tmpNum = num;
var AA = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖");
var BB = new Array("", "拾", "佰", "仟", "万", "亿", "元", "");
var CC = new Array("角", "分", "厘");
var a = ("" + num).replace(/(^0*)/g, "").split("."), k = 0, re = "";
for (var i = a[0].length - 1; i >= 0; i--) {
switch (k) {
case 0:
re = BB[7] + re;
break;
case 4:
if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
re = BB[4] + re;
break;
case 8:
re = BB[5] + re;
BB[7] = BB[5];
k = 0;
break;
}
if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
re = AA[0] + re;
if (a[0].charAt(i) != 0)
re = AA[a[0].charAt(i)] + BB[k % 4] + re;
k++;
}
if (a.length > 1) {// 加上小数部分(如果有小数部分)
if (a[0].length == 0) {
re += "";
} else {
re += BB[6];
}
for (var i = 0; i < a[1].length; i++) {
re += AA[a[1].charAt(i)] + CC[i];
if (i == 2)
break;
}
}
if (tmpNum.toString().indexOf(".") == -1) {
re += "元整";
}
// 处理输入字符0的情况
if (a == '') {
re = "零" + re;
}
return re;
}
/* 是否邮箱*/
export function validateEMail(rule, value,callback) {
const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
if(value==''||value==undefined||value==null){
callback();
}else{
if (!reg.test(value)){
callback(new Error('请输入正确的邮箱地址'));
} else {
callback();
}
}
}
/* 是否身份证号码*/
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();
}
}
}
/* 是否手机号码或者固话*/
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();
}
}
}
/* 是否固话*/
export function validateTelphone(rule, value,callback) {
const reg =/0\d{2}-\d{7,8}/;
if(value==''||value==undefined||value==null){
callback();
}else {
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'));
} else {
callback();
}
}
}页面自定义 校验分数0-100 最多两位小数
在校验规则里面写
answerNum: [{type: 'int', validator: validateFraction, trigger: 'blur'},],
具体方法:
export function validateFraction(rule, value, callback) {
if (!value) {
callback();
}
var reg = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/;
if (reg.test(value) === false) {
callback(new Error('请输入正确成绩,最多保留两位小数'));
}
}在页面中引入验证规则定义的文件，并在export default中定义rule规则，
使用语法
{validator:验证方法,trigger:验证触发}
详细自定义写法可以去看 官网
里面就有自定义校验的详细示例
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3中使用echarts的简单七个步骤(易懂,附紧急避坑)
近期在做一个vue3的项目,里面有个图表需求,因公司之前使用第三方封装的图表缺少文档,就去看了echars的官网文档,引入原生echars来实现,下面这篇文章主要给大家介绍了关于Vue3中使用echarts的简单七个步骤,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了关于vite proxy跨域问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
组件中多个el-upload存在导致上传图片失效的问题及解决
这篇文章主要介绍了组件中多个el-upload存在导致上传图片失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue elementUI 上传非空验证,原理就是写一个假的红色*号,每次点击查看的时候执this.rules.staffImg[0].required = false,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-12-12
今天小编就为大家分享一篇Vue 解决多级动态面包屑导航的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vant的安装和配合引入Vue.js项目里的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue计算属性与监视(侦听)属性的使用,计算属性指的是通过一系列运算之后，最终得到一个值，watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作，本文就这两种属性给大家详细讲解，感兴趣的朋友一起学习吧2022-11-11
这篇文章主要为大家详细介绍了vue.js开发环境的搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue3初始化如何调用函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论