Vue中常用表單校驗規則整理

在 vue開發中，難免遇到各種表單校驗，elementui自帶的驗證往往不能滿足複雜的需求。這裡整理了一些高頻率用到的校驗方法，如果錯誤歡迎指出。

export

function
validateip
(rule, value,callback)
else
|1\d\d|2[0-4]\d|25[0-5])\.(\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|1\d\d|2[0-4]\d|25[0-5])$/;if
((!reg.
test
(value)
)&& value !='')
else
}}

export

function
validatephone
(rule, value,callback)$/;
if(value==
''||value==undefined||value==
null
)else
else
}}

export

function
validateidno
(rule, value,callback)
(([1][9]\d)|([2]\d))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d[0-9xx]$/
;//號碼規則校驗if(
!format.
test
(value)
)//區位碼校驗
//出生年月日校驗 前正則限制起始年份為1900;
var year = value.
substr(6
,4),
//身份證年
month = value.
substr(10
,2),
//身份證月
date = value.
substr(12
,2),
//身份證日
time = date.
parse
(month +
'-'+ date +
'-'+ year)
,//身份證日期時間戳date
now_time = date.
parse
(new
date()
),//當前時間戳
dates =
(new
date
(year, month,0)
).getdate()
;//身份證當月天數
if(time > now_time || date > dates)
//校驗碼判斷
var c =
newarray(7
,9,10
,5,8
,4,2
,1,6
,3,7
,9,10
,5,8
,4,2
);//係數
var b =
newarray
('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++)if
(id_array[17]
.touppercase()
!= b[sum %11]
.touppercase()
)callback()
;}

export

function
validateemail
(rule, value,callback)
else
else
}}

export

function
validateurl
(url)
|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]|[1-9]?[0-9]))|([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]))(:[0-9]+)*(\/($|[a-za-z0-9.,?'\\+&%$#=~_-]+))*$/
;return urlregex.
test
(url)
;}

export

function
ispassword
(rule, value, callback)
else
else
}}

export

function
checkmax10000
(rule, value, callback)
elseif(
!number
(value)
)else
if(value <
1|| value >
10000
)else
}

export

function
checkmaxval
(rule, value,callback)
else
}

export

function
isinteger
(rule, value, callback)
settimeout((
)=>
else
else}}
,0);
}

export

function
isdecimal
(rule, value, callback)
settimeout((
)=>
else
else}}
,100);
}

export

function
isport
(rule, value, callback)
settimeout((
)=>
else
|[1-9]\d|[1-5]\d|6[0-4]\d|65[0-4]\d|655[0-2]\d|6553[0-5])$/
;const rscheck = re.
test
(value);if
(!rscheck)
else}}
,100);
}

export

function
validatelowercase
(val)

export

function
validateuppercase
(val)

export

function
validatevalidity
(rule, value, callback)
)?$)|(^(0)$)|(^[0-9]\.[0-9]([0-9])?$)/
.test
(value)
)else
}

export

function
validatecontacts
(rule, value, callback)if(
!/^[\u0391-\uffe5a-za-z]+$/
.test
(value)
)else
}

export

function
validatenumber
(rule, value, callback)
else
}else
}

export

function
onepoint
(rule, value, callback)
[0-9])?$/
.test
(value)
)else
}

export

function
validatecode
(rule, value, callback)if(
!/^(?![0-9]*$)(?![a-za-z]*$)[a-za-z0-9]$/
.test
(value)
)else
}

前端Vue中常用rules校驗規則

pattern d 1 d d 2 0 4 d 25 0 5 d 1 d d 2 0 4 d 25 0 5 d 1 d d 2 0 4 d 25 0 5 d 1 d d 2 0 4 d 25 0 5 2.是否手機號碼或者固話 pattern 0 d d 1 34578 d 3.是否身份證號碼 pat...

Vue校驗規則

內建了一些校驗規則，如是否手機號，郵箱號，url等 這些規則方法，掛載在 r 下面，如果驗證通過，返回true，否則返回false 是否郵箱號email email 校驗是否郵箱號，返回true或者false email 字串 console.log this.r.email 123465798 g...

工作187 表單校驗規則

這種方式需要在data 中寫入rule 對於需要校驗欄位prop中的如visitorname寫上驗證規則，如下 data rule cardcode d d d x x message 請輸入正確的身份證號碼 trigger blur 其中對於有些需要自定義的校驗規則可以作為變數寫在data中 da...