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

编程语言 2023-06-04 21:07:20 阅读次数: 0

**

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);
    }

表单校验

①. 空函数

扫描二维码关注公众号，回复： 15172851 查看本文章 
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);
    }
}

猜你喜欢

转载自blog.csdn.net/WuqibuHuan/article/details/121514304
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022