Bootstrap

Vue --- 正则共用和表单校验封装方法

**

1.在view/api 目录下创建pattern.js文件

**

//整数
const IntegerRegex = /(^-?[1-9]\d*)|(0{1})$/

//正整数
const IntegerPlusRegex = /^[1-9]\d*|0$/

//小数
const decimalRegex = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/

//正小数
const decimalPlusRegex = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/

//百分比校验（最多两位小数,不能超过100，不带百分号）
const percentageRegex = /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/

//邮箱
const emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

//手机
const mobileRegex = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

//电话号码
const telephoneRegex = /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/

//金额校验（不能超过两位小数）
const moneyRegex = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/

//金额校验，支持负数
const moneyNegativeRegex = /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/

//模块导出
export default {
    //正则
    IntegerRegex,
    IntegerPlusRegex,
    decimalRegex,
    decimalPlusRegex,
    percentageRegexx,
    emailRegex,
    mobileRegex,
    telephoneRegex,
    moneyRegex,
    moneyNegativeRegex，
}

**

2.修改main.js，添加以下内容

**

import pattern from './utils/pattern.js';
Vue.prototype.$pattern = pattern;

**

3.使用

**

//测试变量
let str='aaaa'

//测试调用
let pattern = this.$pattern.moneyNegativePattern;
console.log("测试正则=>",pattern.test(str))

输出：测试正则=> false

**

4.element ui表单校验提取

**

//判断是否为空
function checkNull(val){
    return val!=undefined && val!=null
}

//获取校验规则
function getrRegex(min, max, regex, msg, extend) {
    let list = [
        {
            pattern: regex,
            message: msg,
            trigger: "blur",
        }
    ]
    if (checkNull(min) || checkNull(max)) {
        list.push({
            validator: (rules, value, callback) => {
                if (checkNull(max) && value > max) {
                    return callback(new Error("超出范围"));
                } else if (checkNull(min) && value < min) {
                    return callback(new Error("超出范围"));
                } else {
                    return callback();
                }
            }, trigger: "blur"
        })
    }
    if (typeof extend === "object") {
        extend.forEach(e => {
            list.push(e)
        });
    }
    return list;
}

//是否必填
function addQuired(list,required,msg){
    if (typeof required == Boolean || required) {
        msg = msg == undefined ? '' : msg
        let obj = { required: true, message: msg, trigger: "blur" }
        list.unshift(obj)
    }
}

/*以下为公共校验方法*/
function Integer(required, msg, min, max, extend) {
    let list = getrRegex(min, max, IntegerRegex, "请输入整数", extend)
    addQuired(list,required,msg)
    return list
}

function IntegerPlus(required, msg, min, max, extend) {
    let list = getrRegex(min, max, IntegerPlusRegex, "请输入正整数", extend)
    addQuired(list,required,msg)
    return list
}

function decimal(required, msg, min, max, extend) {
    let list = getrRegex(min, max, decimalRegex, "请输入小数", extend)
    addQuired(list,required,msg)
    return list
}

function decimalPlus(required, msg, min, max, extend) {
    let list = getrRegex(min, max, decimalPlusRegex, "请输入正小数", extend)
    addQuired(list,required,msg)
    return list
}

function percentage(required, msg, extend) {
    let list = getrRegex(null, null, percentageRegex, "请输入正确的百分数，最多两位小数,不能超过100", extend)
    addQuired(list,required,msg)
    return list
}

function email(required, msg, extend) {
    let list = getrRegex(null, null, emailRegex, "请输入正确的邮箱", extend)
    addQuired(list,required,msg)
    return list
}


function mobile(required, msg, extend) {
    let list = getrRegex(null, null, mobileRegex, "请输入正确的手机号", extend)
    addQuired(list,required,msg)
    return list
}

function telephone(required, msg, extend) {
    let list = getrRegex(null, null, telephoneRegex, "请输入正确的电话号码", extend)
    addQuired(list,required,msg)
    return list
}

function money(required, msg, extend) {
    let list = getrRegex(null, null, moneyRegex, "请输入正确的金额，不能超过两位小数", extend)
    addQuired(list,required,msg)
    return list
}

function moneyNegative(required, msg, extend) {
    let list = getrRegex(null, null, moneyNegativeRegex, "请输入正确的金额，不能超过两位小数", extend)
    addQuired(list,required,msg)
    return list
}

export default导出

	//校验函数
	//参数说明
	//1.required必填
	//2.msg必填信息
	//3.最小值
	//4.最大值
	//5.扩展校验
    Integer: function (required, msg, min, max, extend) {
        return Integer(required, msg, min, max, extend);
    },
    IntegerPlus: function (required, msg, min, max, extend) {
        return IntegerPlus(required, msg, min, max, extend);
    },
    decimal: function (required, msg, min, max, extend) {
        return decimal(required, msg, min, max, extend);
    },
    decimalPlus: function (required, msg, min, max, extend) {
        return decimalPlus(required, msg, min, max, extend);
    },
    percentage: function (required, msg, extend) {
        return percentage(required, msg, extend);
    },
    email: function (required, msg, extend) {
        return email(required, msg, extend);
    },
    mobile: function (required, msg, extend) {
        return mobile(required, msg, extend);
    },
    telephone: function (required, msg, extend) {
        return telephone(required, msg, extend);
    },
    money: function (required, msg, extend) {
        return money(required, msg, extend);
    },
    moneyNegative: function (required, msg, extend) {
        return moneyNegative(required, msg, extend);
    }

表单校验

①. 空函数

rules: {
    test: this.$pattern.Integer(),
},

在这里插入图片描述
②.必填校验

rules: {
    test: this.$pattern.Integer(true,"请输入文本"),
},

在这里插入图片描述
同样可以校验整数

在这里插入图片描述
③.范围校验

rules: {
    test: this.$pattern.Integer(true,"请输入文本",0),
},

在这里插入图片描述

rules: {
    test: this.$pattern.Integer(true,"请输入文本",0,100),
},

在这里插入图片描述
④.扩展校验

rules: {
    this.$pattern.Integer(true,"请输入文本",0,1000, [{ min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' }])
},

在这里插入图片描述

封装之前

 rules: {
    NetAssets: [
    	{ required: true, message: '请输入xxx', trigger: 'blur' },
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    ShareRatio: [
    	{ required: true, message: '请输入xxx', trigger: 'blur' },
        { pattern: /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/,message: "请输入正确的百分比",trigger: "blur"}
    ],
    NetProfit: [
    	{ required: true, message: '请输入xxx', trigger: 'blur' },
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    Revenue: [
    	{ required: true, message: '请输入xxx', trigger: 'blur' },
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    AgencyInitiationFees: [
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    AgencyEstimatedFees: [
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    AppraisalValue: [
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    ListingPrice: [
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    TransactionPrice: [
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    IntroduceCapital: [
        { pattern: /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/,message: "请输入正确的金额",trigger: "blur"}
    ],
    PremiumRate: [
        { pattern: /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/,message: "请输入正确的百分比",trigger: "blur"}
    ],
    ROEYield:  [
        { pattern: /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/,message: "请输入正确的百分比",trigger: "blur"}
    ],
    PB: [
        { pattern: /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/,message: "请输入正确的百分比",trigger: "blur"}
    ],
    PE: [
        { pattern: /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/,message: "请输入正确的百分比",trigger: "blur"}
    ],

}

封装之后

rules: {
	NetAssets: this.$pattern.moneyPatternRule(true, "请输入xxx),
    ShareRatio: this.$pattern.percentagePatternRule(true, "请输入xxx"),
    NetProfit: this.$pattern.moneyPatternRule(true, "请输入xxx"),
    Revenue: this.$pattern.moneyPatternRule(true, "请输入xxx"),
    AgencyInitiationFees: this.$pattern.moneyPatternRule(),
    AgencyEstimatedFees: this.$pattern.moneyPatternRule(),
    AppraisalValue: this.$pattern.moneyPatternRule(),
    ListingPrice: this.$pattern.moneyPatternRule(),
    TransactionPrice: this.$pattern.moneyPatternRule(),
    IntroduceCapital: this.$pattern.moneyPatternRule(),
    PremiumRate: this.$pattern.percentagePatternRule(),
    ROEYield: this.$pattern.percentagePatternRule(),
    PB: this.$pattern.percentagePatternRule(),
    PE: this.$pattern.percentagePatternRule(),
},

⑤.附上pattern.js全部代码

//整数
const IntegerRegex = /(^-?[1-9]\d*)|(0{1})$/

//正整数
const IntegerPlusRegex = /^[1-9]\d*|0$/

//小数
const decimalRegex = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/

//正小数
const decimalPlusRegex = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/

//百分比校验（最多两位小数,不能超过100，不带百分号）
const percentageRegex = /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/

//邮箱
const emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

//手机
const mobileRegex = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

//电话号码
const telephoneRegex = /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/

//金额校验（不能超过两位小数）
let moneyRegex = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/

//金额校验，支持负数
let moneyNegativeRegex = /^((-?[1-9]{1}\d*)|(-?0{1}))(\.\d{1,2})?$/

function checkNull(val){
    return val!=undefined && val!=null
}

function getrRegex(min, max, regex, msg, extend) {
    let list = [
        {
            pattern: regex,
            message: msg,
            trigger: "blur",
        }
    ]
    if (checkNull(min) || checkNull(max)) {
        list.push({
            validator: (rules, value, callback) => {
                if (checkNull(max) && value > max) {
                    return callback(new Error("超出范围"));
                } else if (checkNull(min) && value < min) {
                    return callback(new Error("超出范围"));
                } else {
                    return callback();
                }
            }, trigger: "blur"
        })
    }
    if (typeof extend === "object") {
        extend.forEach(e => {
            list.push(e)
        });
    }
    return list;
}

function addQuired(list,required,msg){
    if (typeof required == Boolean || required) {
        msg = msg == undefined ? '' : msg
        let obj = { required: true, message: msg, trigger: "blur" }
        list.unshift(obj)
    }
}

function Integer(required, msg, min, max, extend) {
    let list = getrRegex(min, max, IntegerRegex, "请输入整数", extend)
    addQuired(list,required,msg)
    return list
}

function IntegerPlus(required, msg, min, max, extend) {
    let list = getrRegex(min, max, IntegerPlusRegex, "请输入正整数", extend)
    addQuired(list,required,msg)
}

function decimal(required, msg, min, max, extend) {
    let list = getrRegex(min, max, decimalRegex, "请输入小数", extend)
    addQuired(list,required,msg)
}

function decimalPlus(required, msg, min, max, extend) {
    let list = getrRegex(min, max, decimalPlusRegex, "请输入正小数", extend)
    addQuired(list,required,msg)
}

function percentage(required, msg, extend) {
    let list = getrRegex(null, null, percentageRegex, "请输入正确的百分数，最多两位小数,不能超过100", extend)
    addQuired(list,required,msg)
}

function email(required, msg, extend) {
    let list = getrRegex(null, null, emailRegex, "请输入正确的邮箱", extend)
    addQuired(list,required,msg)
}


function mobile(required, msg, extend) {
    let list = getrRegex(null, null, mobileRegex, "请输入正确的手机号", extend)
    addQuired(list,required,msg)
}

function telephone(required, msg, extend) {
    let list = getrRegex(null, null, telephoneRegex, "请输入正确的电话号码", extend)
    addQuired(list,required,msg)
}

function money(required, msg, extend) {
    let list = getrRegex(null, null, moneyRegex, "请输入正确的金额，不能超过两位小数", extend)
    addQuired(list,required,msg)
}

function moneyNegative(required, msg, extend) {
    let list = getrRegex(null, null, moneyNegativeRegex, "请输入正确的金额，不能超过两位小数", extend)
    addQuired(list,required,msg)
}



export default {
    //正则
    IntegerRegex: IntegerRegex,
    IntegerPlusRegex: IntegerPlusRegex,
    decimalRegex: decimalRegex,
    decimalPlusRegex: decimalPlusRegex,
    percentageRegex: percentageRegex,
    emailRegex: emailRegex,
    mobileRegex: mobileRegex,
    telephoneRegex: telephoneRegex,
    moneyRegex: moneyRegex,
    moneyNegativeRegex: moneyNegativeRegex,

    //校验函数
    Integer: function (required, msg, min, max, extend) {
        return Integer(required, msg, min, max, extend);
    },
    IntegerPlus: function (required, msg, min, max, extend) {
        return IntegerPlus(required, msg, min, max, extend);
    },
    decimal: function (required, msg, min, max, extend) {
        return decimal(required, msg, min, max, extend);
    },
    decimalPlus: function (required, msg, min, max, extend) {
        return decimalPlus(required, msg, min, max, extend);
    },
    percentage: function (required, msg, extend) {
        return percentage(required, msg, extend);
    },
    email: function (required, msg, extend) {
        return email(required, msg, extend);
    },
    mobile: function (required, msg, extend) {
        return mobile(required, msg, extend);
    },
    telephone: function (required, msg, extend) {
        return telephone(required, msg, extend);
    },
    money: function (required, msg, extend) {
        return money(required, msg, extend);
    },
    moneyNegative: function (required, msg, extend) {
        return moneyNegative(required, msg, extend);
    }
}

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
上海浦东装修公司推荐：高端选择，品质生活
Pytorch深度学习入门基础（四）：TensorBoard 的使用
Android开发-Android应用中启动时引导页的实现
Yolov3,v4,v5区别
prometheus自动发现之kubernetes_sd_configs
教你破解隔壁妹子wifi密码，成功率高达90%
快速排序基准选择及优化
开发过程中的”骚“操作
最近我没什么项目做用 VS Code 摸鱼神器，确定不试一下？
Navicat for MySQL 导出txt文件无法导入
;