js常用表单验证规则

简介: js常用表单验证规则

1. 前言

  1. 空验证我下面不在统计写了

2. 空验证

// 判空
  isEmpty: (val) => {
    // 判断数据是否为null  广义上的空判断 即 当数据为 null / undefined / Infinity / Infinity / NaN / 空数组  / 空对象 /空文件 都会返回 true
    try {
      if (val == null) return true;
      if (typeof val === "boolean") return val;
      if (typeof val === "number") {
        // console.log('这是进了 - 1', val)
        if (val === Infinity || val === -Infinity || isNaN(val)) return true;
        return val != 0 ? !val : false;
      }
      if (val instanceof Error) return val.message === "";
      switch (Object.prototype.toString.call(val)) {
        // String or Array
        case "[object String]":
        case "[object Array]":
          return !val.length;
        // Map or Set or File
        case "[object File]":
        case "[object Map]":
        case "[object Set]": {
          return !val.size;
        }
        // Plain Object
        case "[object Object]": {
          return !Object.keys(val).length;
        }
      }
      return false;
    } catch (err) {
      // console.log('这是err', err)
      return err;
    }
  },

3. 校验手机号码

validatePhone(rule, value, callback) {
    // let reg = /^1[3456789]\d{9}$/;
    const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
    let val = fn.filterBlank(value);
    if (fn.isEmpty(val)) {
      callback(new Error("请输入手机号码"));
    } else if (!reg.test(val)) {
      callback(new Error("请输入正确的手机号码"));
    } else {
      callback();
    }
  },

4. 中文姓名验证

// 
  validatorName(rule, value, callback) {
    if (fn.isEmpty(value)) {
      callback(new Error(rule.msg || "姓名不能为空"));
    } else {
      // const regex = /^[A-Za-z0-9\u4E00-\u9FA5·\-s]{2,15}$/;
      let regex =
        /^[A-Za-z0-9\u9FA6-\u9FCB\u3400-\u4DB5\u4E00-\u9FA5·\-s]{2,15}([A-Za-z0-9\u25CF\u00B7·\-s][A-Za-z0-9\u9FA6-\u9FCB\u3400-\u4DB5\u4E00-\u9FA5·\-s]{2,15})*$/gi;
      if (!regex.test(value)) {
        return callback(new Error("请输入2-15位且不含特殊符号"));
      } else {
        callback();
      }
    }
  },

5. 账号规则

validateAccount(rule, value, callback) {
    if (fn.isEmpty(value)) {
      callback(new Error(rule.msg || "不能为空"));
    } else {
      const regex = /^[a-zA-Z0-9_]{4,12}$/;
      if (!regex.test(value)) {
        return callback(new Error("请输入4-12位字母、数字或下划线"));
      } else {
        callback();
      }
    }
  },

6. 验证数数字

NUM(rule, value, callback) {
    if (fn.isEmpty(value)) {
      callback(new Error(rule.msg));
      return;
    }
    if (!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
      callback(new Error("请输入数字值"));
    } else {
      callback();
    }
  },

7. 验证小数

validateDecimal(rule, value, callback) {
    if (fn.isEmpty(value)) {
      callback(new Error(rule.msg));
      return;
    }
    let regex = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/;
    if (!regex.test(value)) {
      callback(new Error("只能输入数字、小数"));
    } else {
      callback();
    }
  },

8. 只能中文

CN(rule, value, callback) {
    // console.log(rule);
    if (fn.isEmpty(value)) {
      callback(new Error(rule.msg));
      return;
    }
    const regex = /^[\u4e00-\u9fa5]+$/;
    if (!regex.test(value)) {
      callback(new Error("输入只能为中文"));
    } else {
      callback();
    }
  },

9. 中文、下划线、-或英文括号

CN_(rule, value, callback) {
    // console.log(rule);
    if (fn.isEmpty(value)) {
      callback(new Error(rule.msg));
      return;
    }
    const regex = /^[\u4e00-\u9fa5_\-\(\)\/]+$/;
    if (!regex.test(value)) {
      callback(new Error("输入包含中文、下划线、-或英文括号"));
    } else {
      callback();
    }
  },

10. 身份证号

validateIdCard(rule, value, callback) {
    // console.log(value);
    // value = value.replace(/\s*/g, "")
    // console.log(value);
    if (!value) {
      return callback(new Error("身份证号码不能为空"));
    }
    function validataCredentials(num) {
      var msg, boo; //  msg身份证验证友情提示,boo返回值
      var num = num.toUpperCase(); // 身份证为末尾可能是X
      //   身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,
      //   最后一位是校验位,可能为数字或字符X。
      const arrInt = new Array(
        7,
        9,
        10,
        5,
        8,
        4,
        2,
        1,
        6,
        3,
        7,
        9,
        10,
        5,
        8,
        4,
        2
      );
      const arrCh = new Array(
        "1",
        "0",
        "X",
        "9",
        "8",
        "7",
        "6",
        "5",
        "4",
        "3",
        "2"
      );
      var nTemp = 0,
        i;
      if (!/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num)) {
        //  输入的身份证号长度不对,或者号码不符合规定;
        return [
          (boo = false),
          (msg = "输入的身份证号长度不对,或者号码不符合规定"),
        ];
      }
      //   校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
      //   下面分别分析出生日期和校验位
      var len, re;
      len = num.length;
      if (len == 15) {
        re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
        var arrSplit = num.match(re);
        //   检查生日日期是否正确
        var dtmBirth = new Date(
          "19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
        );
        var bGoodDay;
        bGoodDay =
          dtmBirth.getYear() == Number(arrSplit[2]) &&
          dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
          dtmBirth.getDate() == Number(arrSplit[4]);
        if (!bGoodDay) {
          //   输入的身份证号里出生日期不对!
          return [(boo = false), (msg = "输入的身份证号里出生日期不对!")];
        } else {
          //   将15位身份证转成18位
          //   校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
          num = num.substr(0, 6) + "19" + num.substr(6, num.length - 6);
          for (i = 0; i < 17; i++) {
            nTemp += num.substr(i, 1) * arrInt[i];
          }
          num += arrCh[nTemp % 11];
          return [(boo = true), (msg = num)];
        }
      }
      if (len == 18) {
        re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
        var arrSplit = num.match(re);
        //  检查生日日期是否正确
        var dtmBirth = new Date(
          arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
        );
        var bGoodDay;
        bGoodDay =
          dtmBirth.getFullYear() == Number(arrSplit[2]) &&
          dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
          dtmBirth.getDate() == Number(arrSplit[4]);
        if (!bGoodDay) {
          //  输入的身份证号里出生日期不对!
          return [(boo = false), (msg = " 输入的身份证号里出生日期不对")];
        } else {
          //  检验18位身份证的校验码是否正确。
          //  校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
          var valnum;
          for (i = 0; i < 17; i++) {
            nTemp += num.substr(i, 1) * arrInt[i];
          }
          valnum = arrCh[nTemp % 11];
          if (valnum != num.substr(17, 1)) {
            //  18位身份证的校验码不正确!
            return [(boo = false), (msg = "请输入正确的身份证号码")];
          }
          return [(boo = true), (msg = "验证成功")];
        }
      }
      return [(boo = false), (msg = "身份证的长度不正确!")];
    }
    // setTimeout(() => {
    var res = validataCredentials(value);
    if (!res[0]) {
      callback(new Error(res[1]));
    } else {
      callback();
    }
    // }, 10);
  },

11. 根据身份证获取年龄、性别

export function analyzeIDCard(IDCard) {
  var result = {};
  //获取用户身份证号码
  var userCard = IDCard;
  //如果身份证号码为undefind则返回空
  if (!userCard) {
    return result;
  }
  //获取性别
  if (parseInt(userCard.substr(16, 1)) % 2 == 1) {
    result.sex = "男";
  } else {
    result.sex = "女";
  }
  //获取出生年月日
  var yearBirth = userCard.substring(6, 10);
  var monthBirth = userCard.substring(10, 12);
  var dayBirth = userCard.substring(12, 14);
  //获取当前年月日并计算年龄
  var myDate = new Date();
  var monthNow = myDate.getMonth() + 1;
  var dayNow = myDate.getDay();
  var age = myDate.getFullYear() - yearBirth;
  if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
    age--;
  }
  //得到年龄
  result.age = age;
  //返回性别和年龄
  return result;
}

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉

相关文章
|
7月前
Turndown 源码分析:二、规则`commonmark-ruiles.js` REV1
Turndown 源码分析:二、规则`commonmark-ruiles.js` REV1
46 0
|
7月前
Turndown 源码分析:三、规则集`rules.js` REV1
Turndown 源码分析:三、规则集`rules.js` REV1
56 0
|
7月前
|
JavaScript 前端开发
JavaScript标识符(命名规则)
JavaScript标识符(命名规则)
68 0
|
2月前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
18 0
|
3月前
|
JavaScript 前端开发
JavaScript 表单验证
JavaScript 表单验证
21 9
|
3月前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
4月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
68 0
|
4月前
|
JavaScript 前端开发
JavaScript的命名规则
JavaScript的命名规则
109 0
|
4月前
|
JavaScript 前端开发
js中的命名规则
js中的命名规则
|
6月前
|
JavaScript 前端开发
JavaScript变量命名规则及关键字详解
JavaScript变量命名规则及关键字详解