在 vue开发中,难免遇到各种表单校验,elementUI自带的验证往往不能满足复杂的需求。这里整理了一些高频率用到的校验方法,如果错误欢迎指出。
目录
1 是否合法IP地址2 是否手机号码3 是否身份证号码4 是否邮箱5 合法url6 验证是否包含英文数字以及下划线7 检验数值的范围8 验证数字输入框最大数值9 验证是否正整数10 验证是否是[0-1]的小数11 验证端口是否在[0,65535]之间12 验证小写字母13 验证大写字母14 验证是否两位小数15 中文校验16 纯数字校验17 最多一位小数校验18 账号校验
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 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();
}
}
}
3 是否身份证号码
export function validateIdNo(rule
, value
,callback
) {
var format
= /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
if (!format
.test(value
)) {
callback(new Error('请输入正确身份证号'));
}
var year
= value
.substr(6, 4),
month
= value
.substr(10, 2),
date
= value
.substr(12, 2),
time
= Date
.parse(month
+ '-' + date
+ '-' + year
),
now_time
= Date
.parse(new Date()),
dates
= (new Date(year
, month
, 0)).getDate();
if (time
> now_time
|| date
> dates
) {
callback(new Error('请输入正确身份证号'));
}
var c
= new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var b
= new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var id_array
= value
.split("");
var sum
= 0;
for (var k
= 0; k
< 17; k
++) {
sum
+= parseInt(id_array
[k
]) * parseInt(c
[k
]);
}
if (id_array
[17].toUpperCase() != b
[sum
% 11].toUpperCase()) {
callback(new Error('请输入正确身份证号'));
}
callback();
}
4 是否邮箱
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();
}
}
}
5 合法url
export function validateURL(url
) {
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(url
);
}
6 验证是否包含英文数字以及下划线
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();
}
}
}
7 检验数值的范围
export function checkMax10000(rule
, value
, callback
) {
if (value
== '' || value
== undefined
|| value
== null) {
callback();
} else if (!Number(value
)) {
callback(new Error('请输入[1,10000]之间的数字'));
} else if (value
< 1 || value
> 10000) {
callback(new Error('请输入[1,10000]之间的数字'));
} else {
callback();
}
}
8 验证数字输入框最大数值
export function checkMaxVal(rule
, value
,callback
) {
if (value
< 0 || value
> 最大值
) {
callback(new Error('请输入[0,最大值]之间的数字'));
} else {
callback();
}
}
9 验证是否正整数
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);
}
10 验证是否是[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);
}
11 验证端口是否在[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);
}
12 验证小写字母
export function validateLowerCase(val
) {
const reg
= /^[a-z]+$/;
return reg
.test(val
);
}
13 验证大写字母
export function validateUpperCase(val
) {
const reg
= /^[A-Z]+$/;
return reg
.test(val
);
}
14 验证是否两位小数
export function validateValidity (rule
, value
, callback
){
if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value
)) {
callback(new Error('最多两位小数!!!'));
} else {
callback();
}
}
15 中文校验
export function validateContacts(rule
, value
, callback
){
if (!value
) {
return callback(new Error('请输入中文'))
}
if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value
)) {
callback(new Error('不可输入特殊字符'))
} else {
callback()
}
}
16 纯数字校验
export function validateNumber(rule
, value
, callback
){
let numberReg
= /^\d+$|^\d+[.]?\d+$/
if (value
!== '') {
if (!numberReg
.test(value
)) {
callback(new Error('请输入数字'))
} else {
callback()
}
} else {
callback(new Error('请输入值'))
}
}
17 最多一位小数校验
export function onePoint(rule
, value
, callback
){
if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value
)) {
callback(new Error('最多一位小数!!!'));
} else {
callback();
}
}
18 账号校验
export function validateCode(rule
, value
, callback
){
if (!value
) {
return callback(new Error('请输入账号'))
}
if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value
)) {
callback(new Error('账号必须为6-20位字母和数字组合'))
} else {
callback()
}
}