第四章封装效验js

在后台项目中，我们需要很多的验证，有些是element-ui自带的，有些则是需要我们自己写的:比如:防止SQL注入，合法uir,大小写转化等，

因此在项目中新建工具文件夹(utils),在validate.js放入这些方法:

一、常用效验js

防止SQL注入

export function stripScript(s) {
  //字符串格式化，防止SQL注入
  var rs = "";
  if (s != null && s != "" && s != undefined) {
    var pattern = new RegExp(
      "[`~!@#$^&*()=|{}';'\\[\\]<>?~！@#￥……&*（）——|{}【】‘；”“'。、？]"
    );
    rs = "";
    for (var i = 0; i < s.length; i++) {
      rs = rs + s.substr(i, 1).replace(pattern, "");
    }
  }
 else {
    rs = s;
  }
  return rs;
}

URL合法检验

export function validateURL(textval) {
  const urlregex = /^(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 urlregex.test(textval);
}

字符大小写处理

/* 小写字母*/
export function validateLowerCase(str) {
  const reg = /^[a-z]+$/;
  return reg.test(str);
} 

/* 大写字母*/

export function validateUpperCase(str) {
  const reg = /^[A-Z]+$/;
  return reg.test(str);
} 

/* 大小写字母*/
export function validateAlphabets(str) {
  const reg = /^[A-Za-z]+$/;
  return reg.test(str);
}

邮箱验证

/**
 * validate email
 * @param email
 * @returns {boolean}
 */
export function validateEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\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 re.test(email);
}

手机号码

/**
 * validate Phone
 * @param Phone
 * @returns {boolean}
 */
export function validatePhone(phoneNum) {
  const re = /^1[3456789]\d{9}/;
  return re.test(phoneNum);
}

身份证

扫描二维码关注公众号，回复： 10813506 查看本文章

/**
 * validate idCard
 * @param idCard
 * @returns {boolean}
 */
export function validateIdCard(idCard) {
  const re = /(^\d{15}&)|(^\d{18})|(^\d{17}(\d|X|x)$)/;
  return re.test(idCard);
}

银行卡号

/**
 * validate bank
 * @param bankNum
 * @returns {boolean}
 */
export function validateBank(bankNum) {
  const re = /^[0-9]{16,19}$/;
  return re.test(bankNum);
}

二、项目中使用

在需要验证的页面中:

import { validUsername, stripScript } from "@/utils/validate";

然后直接使用:

let validateUsername = (rule, value, callback) => {
      value = stripScript(value);
      if (!validUsername(value)) {
        callback(new Error("输入正确的用户名"));
      } else {
        callback();
      }
    };

第四章 封装效验js

猜你喜欢

第四章封装效验js