版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Feast_aw/article/details/80945246
首先这个是我一些常用的表单验证我整理的一份
/*大于0小于100数字*/
export
function
validateNumber(
val) {
const 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}$
/;
return reg.
test(val)
}
export
function
validdateMobile(
val) {
const length
= val.length;
var mobile
=
/
^
1(
[358][0-9]
|
4
[579]
|
66
|
7
[0135678]
|
9
[89]
)
[0-9]
{8}$
/;
return length
==
11
&& mobile.
test(val)
}
export
function
validPassword(
val) {
const reg
=
/
^
(?!
[0-9]
+$
)(?!
[a-zA-Z]
+$
)
[0-9A-Za-z]
{6,21}$
/;
return reg.
test(val)
}
//联系方式
export
function
validContact(
val){
var reg
=
/(
^
[0-9]
{3,20}$
)/;
return reg.
test(val);
}
// export function validContact(val){
// var reg =/(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\(\d{3}\))|(\d{3}\-))?(1[358]\d{9})$)/;
// return reg.test(val);
// }
//身份证
export
function
card(
val){
var reg
=
/(
^
\d
{15}$
)
|
(
^
\d
{18}$
)
|
(
^
\d
{17}
(
\d
|
X
|
x)
$
)/;
return reg.
test(val);
}
//验证数字包括浮点数
export
function
validNumber(
val){
var reg
=
/
^
[0-9]
+
\.
?
[0-9]
*$
/;
return reg.
test(val);
}
//金额验证，保留两位小数
export
function
validMoney(
val){
var reg
=
/
^
(
[1-9]\d
{0,8}|
0)(
\.\d
{1,6}
)
?$
/;
return reg.
test(val);
}
//验证合法的姓名
export
function
validName(
val){
var reg
=
/
^
[\u4e00-\u9fa5]
+
(·
[\u4e00-\u9fa5]
+
)
*$
/;
return reg.
test(val);
}
//邮箱验证
export
function
validemail(
val){
var reg
=
/
^
[A-Za-z0-9\u4e00-\u9fa5]
+
@
[a-zA-Z0-9_-]
+
(
\.[a-zA-Z0-9_-]
+
)
+$
/;
return reg.
test(val);
}
再别的组件要用的时候先引入
import { validdateMobile,card,validemail }
from
"@/service/rule_filter";
在data里边验证
data(){
//表单验证
//验证手机号
var
checkphone
= (
rule,
value,
callback)
=>{
if (
!value) {
return
callback(
new Error(
'手机号不能为空'));
}
else
if (
validdateMobile(value)) {
return
callback();
}
else{
return
callback(
new Error(
'请输入正确的手机号'));
}
};
//验证身份证号
var
checkcard
= (
rule,
value,
callback)
=> {
if (
!value) {
return
callback(
new Error(
'身份证号不能为空'));
}
else
if (
card(value)) {
return
callback();
}
else{
return
callback(
new Error(
'请输入正确的身份证号'));
}
}
//验证邮箱
var
checkemail
= (
rule,
value,
callback)
=> {
if (
!value) {
return
callback(
new Error(
'邮箱不能为空'));
}
else
if (
validemail(value)) {
return
callback();
}
else{
return
callback(
new Error(
'请输入正确的邮箱'));
}
}
return {
ruleForm:{
uPhone:
"",
//电话
uCard:
"",
//身份证
uEmail:
"",
//邮箱
},
rules2: {
uPhone: [
{ required:
true,validator: checkphone, trigger:
'blur' },
],
uCard:[
{ required:
true,validator: checkcard, trigger:
'blur' },
],
uEmail:[
{ required:
true,validator: checkemail, trigger:
'blur' },
],
},
}
下边是html部分
<
el-dialog
:title="layerTitle"
:visible.sync="adddialogFormVisible"
width=
"664px"
center >
<
el-form
ref=
"ruleForm"
:inline="
true"
:model="ruleForm"
:rules="rules2"
label-width=
"100px" >
<
el-form-item
label=
"手机号"
prop=
"uPhone">
<
el-input
v-model="ruleForm.uPhone"></
el-input>
</
el-form-item>
<
el-form-item
label=
"身份证号"
prop=
"uCard">
<
el-input
v-model="ruleForm.uCard"></
el-input>
</
el-form-item>
<
el-form-item
label=
"邮箱"
prop=
"uEmail">
<
el-input
v-model="ruleForm.uEmail"></
el-input>
</
el-form-item>
<
br>
<
el-form-item>
<
el-button
type=
"primary"
@click="
submitForm(
'ruleForm')">确定</
el-button>
<
el-button
@click="
resetForm(
'ruleForm')">取消</
el-button>
</
el-form-item>
</
el-form>
</
el-dialog>