常用的表单正则和一些常用的方法

初识.初见

于 2022-08-08 10:09:12 发布

阅读量199

点赞数

分类专栏：正则文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_45016428/article/details/126221914

版权

正则专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了多个用于前端验证的实用函数，包括检查外部链接、URL有效性、小写、大写和字母字符串的验证，以及邮箱、字符串类型、数组类型和手机号码的验证。此外，还提供了身份证和地址的有效性检查，以及图片压缩和获取URL参数的辅助方法。这些方法对于确保前端数据的正确性和安全性至关重要。

摘要由CSDN通过智能技术生成

表单验证

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
    return /^(https?:|mailto:|tel:)/.test(path);
}

/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
    const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
    return reg.test(url);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
    const reg = /^[a-z]+$/;
    return reg.test(str);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
    const reg = /^[A-Z]+$/;
    return reg.test(str);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
    const reg = /^[A-Za-z]+$/;
    return reg.test(str);
}

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
    // eslint-disable-next-line no-useless-escape
    const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
    if (typeof str === "string" || str instanceof String) {
        return true;
    }
    return false;
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
    if (typeof Array.isArray === "undefined") {
        return Object.prototype.toString.call(arg) === "[object Array]";
    }
    return Array.isArray(arg);
}

/**
 * @param {String} mobile
 * @returns {Boolean}
 */
export function validMobile(mobile) {
    const reg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
    return reg.test(mobile);
}

export function validIdCard(val) {
    if (val) {
        let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if (reg.test(val)) {
            let _val = val.replace(/\s/gi, "");
            let idArr = _val.split("");
            let codeMap = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            let checkCode = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
            let sum = 0;
            for (let i = 0; i < idArr.length; i++) {
                if (i <= 16) {
                    sum = sum + idArr[i] * codeMap[i];
                }
            }
            let codeKey = sum % 11;
            // eslint-disable-next-line eqeqeq
            return idArr[idArr.length - 1] == checkCode[codeKey];
        } else {
            return false;
        }
    } else {
        return false;
    }
}

/**
 * @param {String} address
 * @returns {Boolean}
 */
export function validAddress(address) {
    const reg = /^.{4,}$/;
    return reg.test(address);
}

/**
 * 名字验证
 * @param {String} certName
 * @returns {Boolean}
 */
export function validCertName(certName) {
    const reg = /^[\u4E00-\u9FA5]{2,15}$/;
    return reg.test(certName);
}
/**
 * 少数名字验证
 * @param {String} certName
 * @returns {Boolean}
 */
export function validSCertName(certName) {
    const reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
    return reg.test(certName);
}

一些方法：
1.获取链接上参数

    //获取url上参数
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);//这个是获取当前地址的
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    }

如：https://xxxx.com?id=1&number=126221914

this.getQueryVariable(id)  => 1
this.getQueryVariable(number)  => 126221914

2.计算base64格式图片大小

    imageSize(base64Str) {
      const indexBase64 = base64Str.indexOf("base64,");
      if (indexBase64 < 0) return -1;
      const str = base64Str.substr(indexBase64 + 6);
      console.log((str.length * 0.75).toFixed(2));
      return (str.length * 0.75).toFixed(2);
    }

3.vant ui 图片压缩

    compressImg(file) {
      const that = this;
      const myImage = new Image();
      // var formData = new FormData();
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      myImage.src = file.content;
      //画布宽度
      let width = 512;
      myImage.onload = () => {
        //画布大小按照图片的比例生成
        let height = width / (myImage.naturalWidth / myImage.naturalHeight);
        // 指定canvas画布大小，该大小为最后生成图片的大小
        canvas.width = width;
        canvas.height = height;
        /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点， canvas.width, canvas.height 是将图片按给定的像素进行缩小。*/
        /* 如果不指定缩小的像素，图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后得到的图片就是张局部图。图片小于画布就会有黑边。*/
        context.drawImage(myImage, 0, 0, canvas.width, canvas.height);
        // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
        file.content = canvas.toDataURL(file.file.type, 0.92);

      };
    },