vue+elementUI正则验证封装

正则表达式封装

validator.js

export default {
    /**
     * 数字验证
     */
    isNumber(rule, value, callback) {
        if (!value) { //当使用时没有定义text则非空验证默认提示请输入
            callback(new Error(rule.text ? rule.text : '请输入'));
        } else {
            // const reg = /^[0-9]*$/
            const reg = /^[+-]?\d+(?:\.\d{1,4})?$/
            if (reg.test(value) && value >= 0) {
                callback();
            } else {
                if (!String(value).indexOf(".") + 1) {
                    callback(new Error('请输入数字!'));
                } else {
                    callback(new Error('仅支持小数点后4位!'));
                }
            }
        }
    },
    // 非空不效验
    isNumber2(rule, value, callback) {
        if (!value) { //当使用时没有定义text则非空验证默认提示请输入
            callback();
        } else {
            const reg = /^[+-]?\d+(?:\.\d{1,4})?$/
            if (reg.test(value) && value >= 0) {
                callback();
            } else {
                if (!String(value).indexOf(".") + 1) {
                    callback(new Error('请输入数字!'));
                } else {
                    callback(new Error('仅支持小数点后4位!'));
                }
            }
        }
    },
    /**
     * 只能包含由汉字、字母、数字，以及 - 和 _
     */
    isStr(rule, value, callback) {
        if (!value) {
            callback(new Error(rule.text ? rule.text : '请输入'));
        } else {
            const reg = /^[\u4e00-\u9fa5\w\d-_]+$/
            if (reg.test(value)) {
                callback();
            } else {
                callback('包含非法字符');
            }
        }
    },

    /**
     * 手机号验证 （11位数字，以1开头。）
     */
    isPhone(rule, value, callback) {
        if (!value) {
            callback(new Error(rule.text ? rule.text : '请输入'));
        } else {
            const reg = /^1\d{10}$/
            if (reg.test(value)) {
                callback();
            } else {
                callback('请输入正确的手机号');
            }
        }
    },
    /**
     * 网址验证 www.或http://开头https://
     */
    isHttp(rule, value, callback) {
        if (!value) {
            callback(new Error(rule.text ? rule.text : '请输入'));
        } else {
            const reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/
            const reg2 = /(http|https):\/\/([\w.]+\/?)\S*/
            if (reg.test(value) || reg2.test(value)) {
                callback();
            } else {
                callback('请输入正确的网址');
            }
        }
    },

    /**
     * 邮箱验证 
     */
    isEmail(rule, value, callback) {
        if (!value) {
            callback(new Error(rule.text ? rule.text : '请输入'));
        } else {
            const reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
            if (reg.test(value)) {
                callback();
            } else {
                callback('请输入正确的邮箱');
            }
        }
    },


    /**
     * 验证身份证号码（15位或18位数字）
     */
    isIdentity(rule, value, callback) {
        if (!value) {
            callback(new Error(rule.text ? rule.text : '请输入'));
        } else {
            const reg = /^\d{15}|\d{}18$/
            if (reg.test(value)) {
                callback();
            } else {
                callback('请输入正确的身份证号码');
            }
        }
    },

页面引入使用：

//引入
import Validators from "@/utils/validator.js";

//使用
      rules: {
        name: [
          {
            required: true,
            text: "该项不能为空",
            validator: Validators.isHttp,
            trigger: ["blur", "change"],
          },
        ],
      },