1.手机号码验证(验证方式写在一个公共js文件中,在对应组件中引入即可)
//方法一
/* 需传参,n为是否必填参数 */
export const isPhone = (n) => {
return [
{
required: n,
message: "不能为空",
trigger: "blur",
},
{
pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: '请输入正确电话号码',
},
];
}
//方法二
/* 不需要传参,直接使用即可 */
export const isPhone = (rule, value, callback) => {
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
if (value != "") {
if (reg.test(value)) {
callback();
}else {
callback('请输入正确联系方式')
}
} else {
callback();
}
}
2.邮箱验证(验证方式写在一个公共js文件中,在对应组件中引入即可)
//方法一
/* 不需要传参,直接引入使用即可 */
export const isEmail = (rule,value,callback) => {
let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (value != "") {
if (reg.test(value)) {
callback()
}else {
callback('请输入正确邮箱')
}
}else {
callback()
}
}
//方法二
/* 需要传参,n为是否必填参数 */
export const isEmail = (n) => {
return [
{
required: n,
message: "不能为空",
trigger: "blur",
},
{
pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
message: '请输入正确邮箱',
},
];
}
3.经纬度验证(行内方式)
<el-form-item label="纬度:" prop="stationLat" rules="[{ required: false, trigger: 'blur' }, { pattern: /^([0-8]?\d{1}\.\d{0,4}|90\.0{0,4}|[0-8]?\d{1}|90)$/, message: '输入值为0-90,小数不能超过4位' }]">
<el-input placeholder="" v-model ="stationdata.stationLat" size="mini" style="width: 100px"></el-input>
</el-form-item>
<el-form-item label="经度:" prop="stationLng" :rules="[{ required: false, trigger: 'blur' }, { pattern: /^(((\d|[1-9]\d|1[1-7]\d|0)\.\d{0,4})|(\d|[1-9]\d|1[1-7]\d|0{1,3})|180\.0{0,4}|180)$/, message: '输入值为0-180,小数不能超过4位' }]">
<el-input placeholder="" v-model ="stationdata.stationLng" size="mini" style="width: 100px"></el-input>
</el-form-item>
4.百分比验证
[
{ required: true, message: "必填!!!", trigger: "blur" }, { pattern: /^(100|(([1-9]){1}[0-9]?|0{1})((\.)([0-9]){1,2})?)$/, message: '必须为正数,输入范围0-100,小数不能超过2位' }
]