正则匹配 | 表单校验
预览：
一、Element-Plus 表单 简例[内含常见验证需求]；
1. 电话检测所需JS [ checkTelphone.js ]
/checkTelphone.js
匹配所有电话格式,不限于国内; 有一个符合则返回 true;
let phone_pattern = [
/^(\+?213|0)(5|6|7)\d{8}$/,
/^(!?(\+?963)|0)?9\d{8}$/,
/^(!?(\+?966)|0)?5\d{8}$/,
/^(\+?1)?[2-9]\d{2}[2-9](?!11)\d{6}$/,
/^(\+?420)? ?[1-9][0-9]{2} ?[0-9]{3} ?[0-9]{3}$/,
// /^(\+?49[ \.\-])?([\(]{1}[0-9]{1,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,
/^(\+?45)?(\d{8})$/,
/^(\+?30)?(69\d{8})$/,
/^(\+?61|0)4\d{8}$/,
/^(\+?44|0)7\d{9}$/,
/^(\+?852\-?)?[569]\d{3}\-?\d{4}$/,
/^(\+?91|0)?[789]\d{9}$/,
/^(\+?64|0)2\d{7,9}$/,
/^(\+?27|0)\d{9}$/,
/^(\+?26)?09[567]\d{7}$/,
/^(\+?34)?(6\d{1}|7[1234])\d{7}$/,
/^(\+?358|0)\s?(4(0|1|2|4|5)?|50)\s?(\d\s?){4,8}\d$/,
/^(\+?33|0)[67]\d{8}$/,
/^(\+972|0)([23489]|5[0248]|77)[1-9]\d{6}/,
/^(\+?36)(20|30|70)\d{7}$/,
/^(\+?39)?\s?3\d{2} ?\d{6,7}$/,
/^(\+?81|0)\d{1,4}[ \-]?\d{1,4}[ \-]?\d{4}$/,
/^(\+?6?01){1}(([145]{1}(\-|\s)?\d{7,8})|([236789]{1}(\s|\-)?\d{7}))$/,
/^(\+?47)?[49]\d{7}$/,
/^(\+?32|0)4?\d{8}$/,
/^(\+?47)?[49]\d{7}$/,
/^(\+?48)? ?[5-8]\d ?\d{3} ?\d{2} ?\d{2}$/,
/^(\+?55|0)\-?[1-9]{2}\-?[2-9]{1}\d{3,4}\-?\d{4}$/,
/^(\+?351)?9[1236]\d{7}$/,
/^(\+?7|8)?9\d{9}$/,
/^(\+3816|06)[- \d]{5,9}$/,
/^(\+?90|0)?5\d{9}$/,
/^(\+?84|0)?((1(2([0-9])|6([2-9])|88|99))|(9((?!5)[0-9])))([0-9]{7})$/,
/^(\+?0?86\-?)?1[345789]\d{9}$/,
/^(\+?886\-?|0)?9\d{8}$/
]
export default function (string) {
var isOK = phone_pattern.some(ele => {
var reg = new RegExp(ele);
return reg.test(string) === true;
})
return isOK;
}
2. html示例模板
HTML:
<el-dialog v-model="dialogFormVisible" title="表单-检验-正则">
<!-- 是否以行内形式展示校验信息 :inline-message="false" -->
<!-- 是否显示必填字段的标签旁边的红色星号 :hide-required-asterisk="false" -->
<!-- 是否在输入框中显示校验结果反馈图标 :status-icon="true" -->
<!-- 是否在 rules 属性改变后立即触发一次验证 :validate-on-rule-change="true" -->
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
:hide-required-asterisk="false"
:inline-message="false"
:status-icon="true"
:size="mini"
:validate-on-rule-change="true"
label-width="300px"
class="demo-ruleForm"
>
<el-form-item
label="动态改变required"
prop="changeRequired"
:rules="!needRemark ? [{ required: false }] : rules.changeRequired"
>
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item label="商品名称" prop="shopName">
<!-- 去除输入内容的空格 -->
<el-input
v-model="ruleForm.shopName"
@keyup="ruleForm.name = ruleForm.name.replace(/\s/g, '')"
></el-input>
</el-form-item>
<el-form-item label="数字" prop="number">
<el-input v-model="ruleForm.number"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="telephone">
<el-input v-model="ruleForm.telephone"></el-input>
</el-form-item>
<el-form-item label="金额[小数点2位]" prop="money">
<el-input v-model="ruleForm.money"></el-input>
</el-form-item>
<el-form-item label="type=number" prop="typeNumber">
<el-input v-model="ruleForm.typeNumber"></el-input>
</el-form-item>
<el-form-item label="整数" prop="int">
<el-input v-model="ruleForm.int"></el-input>
</el-form-item>
<el-form-item label="正整数" prop="zhengShu">
<el-input v-model="ruleForm.zhengShu"></el-input>
</el-form-item>
<el-form-item label="自然数[内含动态校验]" prop="ziRanShu">
<el-input
v-model="ruleForm.ziRanShu"
placeholder="正负整数或0,一般用于变换数量"
></el-input>
</el-form-item>
<el-form-item label="纯空格报错" prop="whitespace">
<el-input v-model="ruleForm.whitespace"></el-input>
</el-form-item>
<el-form-item label="最大最小长度" prop="minmax">
<el-input v-model="ruleForm.minmax"></el-input>
</el-form-item>
<el-form-item label="精确长度" prop="length">
<el-input v-model="ruleForm.length"></el-input>
</el-form-item>
<el-form-item label="枚举验证" prop="enum">
<el-input v-model="ruleForm.enum"></el-input>
</el-form-item>
<el-form-item label="网址http://www." prop="url">
<el-input v-model="ruleForm.url"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>Create</el-button
>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogFormVisible = false"
>Confirm</el-button
>
</span>
</template>
</el-dialog>
3. 示例 js
JS：
// 引入电话校验所需的正则数组js
import checkTelphoneJS from "@/until/checkTelphone.js";
export default {
name: "HelloWorld",
data() {
//
const checkTelphone = (rule, value, callback) => {
if (checkTelphoneJS(value)) {
return callback();
} else {
return callback(new Error("电话输入有误!"));
}
};
// 判定数字类型是否满足业务18岁
const checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("Please input the age"));
}
setTimeout(() => {
// 判断整数 Number.isInteger()
if (!Number.isInteger(value)) {
callback(new Error("Please input digits"));
} else {
if (value < 18) {
callback(new Error("Age must be greater than 18"));
} else {
callback();
}
}
}, 1000);
};
// 检测数量
var checkNum = (rule, value, callback) => {
// Math.abs() 绝对值
if (parseInt(value) < 0 && Math.abs(parseInt(value)) > 100) {
return callback(new Error("现有库存量不足"));
} else {
return callback();
}
};
return {
needRemark: false, // 动态设置rules检验required
dialogFormVisible: true,
ruleForm: {
email: "",
shopName: "",
telephone: 0,
money: "",
int: "",
zhengShu: "",
ziRanShu: "",
changeRequired: "",
whitespace: "",
number: 0,
minmax: "",
length: "",
enum: "",
url: "",
typeNumber:'',
},
rules: {
url: [{ type: "url", message: `请输入正确的url`, trigger: "change" }],
enum: [
{
type: "enum",
enum: ["aaa", "bbb"],
message: `值必须存在于中 enum`,
trigger: "change",
},
],
length: [{ len: 5, message: "请输入5位", trigger: "blur" }],
minmax: [{ min: 3, max: 8, message: "请输入3-8位", trigger: "blur" }],
changeRequired: [
{
required: true,
trigger: "blur",
message: "Please select Activity zone",
},
],
shopName: [{ required: true, trigger: "blur" }],
number: [{ required: true, validator: checkAge, trigger: "blur" }],
typeNumber: [
{
type: "number",
message: "请输入数字[整数，小数，0，各种数字]",
trigger: "blur",
// 校验前进行数据类型处理;
transform: (value) => Number(value),
},
],
email: [
{
type: "email",
required: true,
message: "请输入正确的邮箱地址[email protected]",
trigger: "blur",
},
],
telephone: [
{ type: "number", message: `请输入数字`, trigger: "blur" },
{ required: true, validator: checkTelphone, trigger: "blur" },
],
money: [
{ required: true, trigger: "blur", message: "请输入金额!" },
{
trigger: ["change", "blur"],
pattern:
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
message: "请输入正确金钱格式(最多保留两位小数)!",
},
],
int: [
{
required: true,
message: "Please select at least one activity type",
trigger: "change",
},
],
zhengShu: [
{ required: true, message: "不能为空!", trigger: "blur" },
{
pattern: /^\d+$/,
message: "请输入正整数",
trigger: ["blur", "change"],
},
],
ziRanShu: [
// 动态校验
{ required: true, validator: checkNum, trigger: "change" },
{
pattern: /^-?[0-9]\d*$/,
trigger: ["blur", "change"],
message: "请输入自然数[正负整数或0]",
},
],
// 空白
whitespace: [
{ whitespace: true, message: "只存在空格", trigger: "blur" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
created() {},
};
二、表单校验rules的type属性；
2.1 type: ‘number’ 类型： [ transform属性，校验前进行类型转换 ]
- type=“number” 类型；
- 需要配合 transform: (value) => Number(value)；校验前进行类型转换;
typeNumber: [
{
type: "number",
message: "请输入数字[整数，小数，0，各种数字]",
trigger: "blur",
// 校验前进行数据类型处理;
transform: (value) => Number(value),
},
],
2.2枚举 type: ‘enum’ 类型：
- type=“enum” 类型；
- 值必须存在于中 enum中；
- 如下：输入值必须是’aaa’ 或 ‘bbb’；
enum: [
{
type: "enum",
enum: ["aaa", "bbb"],
message: `值必须存在于中 enum`,
trigger: "change",
},
],
三、表单校验rules的whitespace属性；
验证是否只有空格；
whitespace: true ；
whitespace: [
{whitespace: true, message: '只存在空格', trigger: 'blur'}
]