公共组件js系列（纯干货）- 最全的表单校验

最新推荐文章于 2022-03-06 22:12:23 发布

ldm-smile

最新推荐文章于 2022-03-06 22:12:23 发布

阅读量331

点赞数 2

分类专栏：表单校验 elementUI 文章标签： js

本文链接：https://blog.csdn.net/qq_37025418/article/details/119805812

版权

elementUI 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

表单校验

1 篇文章 0 订阅

订阅专栏

系列文章目录

第一章最全的表单校验工具

第二章日期工具

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

系列文章目录
前言
一、大小写字母校验
二、中文校验
三、用户名校验
四、密码强度校验
五、电话号码校验

六、身份证合法性校验

七、车牌号码合法性校验

八、金额校验

九、IP地址校验

十、数值校验

前言

任何项目的表单提交都需要数据格式，合法性校验，这里将给出最全的表单校验，同学们看章节寻找需要的校验方式。

一、大小写字母校验

// 校验英文首字母大写
const validateCapitalized = (rule, value, callback) => {
  if (value) {
    const reg = /^[A-Z][A-z]*$/;
    if (!reg.test(value)) {
      callback(new Error('请输入英文，且首字母大写'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};


// 校验英文字母和数字
const validateLetterAndNumber = (rule, value, callback) => {
  if (value) {
    const reg = /^[A-Za-z0-9]+$/;
    if (!reg.test(value)) {
      callback(new Error('请输入英文字母和数字'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验英文字母
const validateLetter = (rule, value, callback) => {
  if (value) {
    const reg = /^[ A-Za-z]+$/;
    if (!reg.test(value)) {
      callback(new Error('请输入英文字母'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

二、中文校验

// 校验中文
const validateChinese = (rule, value, callback) => {
  if (value) {
    const reg = /^[\u4e00-\u9fa5]+$/;
    if (!reg.test(value)) {
      callback(new Error('请输入中文'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非中文
const validateUnChinese = (rule, value, callback) => {
  if (value) {
    const reg = /.*[\u4e00-\u9fa5]+.*$/;
    if (reg.test(value)) {
      callback(new Error('请输入除中文之外的字符'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

三、用户名校验

// 校验用户名格式
const validateUsername = (rule, value, callback) => {
  if (value) {
    const reg = /^[a-zA-Z][a-zA-Z0-9_]+$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的用户名，以英文字母开头，允许数字和下划线'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

四、密码强度校验

// 校验密码格式-强
const validatePasswordTough = (rule, value, callback) => {
  if (value) {
    const reg = /^(?![a-zA-z]+$)(?!\d+$)(?![`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$)(?![a-zA-z\d]+$)(?![a-zA-z`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$)(?![\d`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$)[a-zA-Z\d`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的密码，必须含有英文字母、数字和常用符号'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验密码格式-中
const validatePasswordNormal = (rule, value, callback) => {
  if (value) {
    // const reg = /^(?![a-zA-z]+$)(?!\d+$)(?![`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$)[a-zA-Z\d`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
    const reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$)/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的密码，至少含有英文字母、数字或常用符号中的两种'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验密码格式-弱
const validatePasswordWeak = (rule, value, callback) => {
  if (value) {
    const reg = /^(?:\d+|[a-zA-Z]+|[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+)$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的密码，必须是英文字母、数字或常用符号中的一种'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

五、电话号码校验

// 校验移动电话号码格式
const validateMobile = (rule, value, callback) => {
  if (value) {
    const reg = /^1[3456789]\d{9}$/;
    if (!reg.test(value)) {
      return callback(new Error('请输入正确的手机号码'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验固定电话号码格式
const validateTel = (rule, value, callback) => {
  if (value) {
    const reg = /^[0-9-]{7,25}$/;
    if (!reg.test(value)) {
      return callback(new Error('请输入正确的电话号码'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验手机号码和固定电话号码格式
const validateMobileAndTel = (rule, value, callback) => {
  if (value) {
    const reg = /^1[34578]\d{9}$|^1[34578]\d{9}$|^0\d{2,3}-?\d{7,8}$/;
    if (!reg.test(value)) {
      return callback(new Error('请输入正确的手机号码或固定电话号码'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

六、身份证号合法性校验

// 校验身份证号码格式
const validateIdcard = (rule, value, callback) => {
  if (value) {
    let arr = value.split('');// 得到身份证数组
    if (!(validateNoByIdcard(value) && validateBirthByIdcard(value) && validateCodeByIdcard(arr))) {
      return callback(new Error('请输入正确的身份证号码'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 验证身份证号码的长度类型是否符合规范
const validateNoByIdcard = (val) => {
  let reg = /^\d{17}[\w\d]$/;
  if (!reg.test(val)) {
    return false;
  }
  return true;
};

// 验证18位身份证号码中的生日是否为有效生日
const validateBirthByIdcard = (val) => {
  let year = val.substring(6, 10);
  let month = val.substring(10, 12);
  let day = val.substring(12, 14);
  let reg = new Date(year, parseFloat(month) - 1, parseFloat(day));
  // 这里用getFullYear()获取年份，避免千年虫问题
  if (reg.getFullYear() !== parseFloat(year)
    || reg.getMonth() !== parseFloat(month) - 1
    || reg.getDate() !== parseFloat(day)) {
    return false;
  } else {
    return true;
  }
};

let wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];// 加权因子
let valideteCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];// 身份证验证位值.10代表X
// 验证18位身份证号码中的最后的验证位是否正确
const validateCodeByIdcard = (val) => {
  let sum = 0; // 声明加权求和变量
  if (val[17].toLowerCase() === 'x') {
    val[17] = 10;// 将最后位为x的验证码替换为10方便后续操作
  }
  for (let i = 0; i < 17; i++) {
    sum += wi[i] * val[i];// 加权求和
  }
  let valCodePosition = sum % 11;// 得到验证码所位置
  if (parseFloat(val[17]) === valideteCode[valCodePosition]) {
    return true;
  } else {
    return false;
  }
};

七、车牌号合法性校验

// 校验车牌号码格式
const validateCarcard = (rule, value, callback) => {
  if (value) {
    const reg = /^[\u4e00-\u9fa5|WJ]{1}[A-Z0-9]{6}$/;
    if (!reg.test(value)) {
      return callback(new Error('请输入正确的车牌号码'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

八、金额校验

// 校验金额格式，首位不为0，最多2位小数
const validateAmount = (rule, value, callback) => {
  if (value) {
    const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的金额，首位不能为0，最多2位小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

九、IP地址校验

// 校验IPv4地址格式
const validateIpv4 = (rule, value, callback) => {
  if (value) {
    const reg = /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的IPv4地址'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验IPv6地址格式
const validateIpv6 = (rule, value, callback) => {
  if (value) {
    const reg = /^([\\da-fA-F]{1,4}:){7}([\\da-fA-F]{1,4})$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正确的IPv6地址'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

十、数值校验

// 校验数字
const validateNumber = (rule, value, callback) => {
  if (value) {
    const reg = /^[0-9]*$/;
    if (!reg.test(value)) {
      callback(new Error('请输入数字'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验整数
const validateInteger = (rule, value, callback) => {
  if (value) {
    const reg = /^-?[0-9]\d*$/;
    if (!reg.test(value)) {
      callback(new Error('请输入整数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非零整数
const validateNonzeroInteger = (rule, value, callback) => {
  if (value) {
    const reg = /^-?[1-9]\d*$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非零整数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验正整数
const validatePositiveInteger = (rule, value, callback) => {
  if (value) {
    const reg = /^[1-9]\d*$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正整数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非正整数
const validateNonpositiveInteger = (rule, value, callback) => {
  if (value) {
    const reg = /^-[1-9]\d*|0$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非正整数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验负整数
const validateNegtiveInteger = (rule, value, callback) => {
  if (value) {
    const reg = /^-[1-9]\d*$/;
    if (!reg.test(value)) {
      callback(new Error('请输入负整数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非负整数
const validateNonnegtiveInteger = (rule, value, callback) => {
  if (value) {
    const reg = /^[1-9]\d*|0$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非负整数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验小数
const validateDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/;
    if (!reg.test(value)) {
      callback(new Error('请输入小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验正小数
const validatePositiveDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+))$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非正小数
const validateNonpositiveDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非正小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验负小数
const validateNegtiveDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/;
    if (!reg.test(value)) {
      callback(new Error('请输入负小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非负小数
const validateNonnegtiveDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^\d+(\.\d+)?$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非负小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验正纯小数
const validatePositivePureDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^0\.\d*[1-9]\d*$/;
    if (!reg.test(value)) {
      callback(new Error('请输入正纯小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非负纯小数
const validateNonnegtivePureDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^0\.\d*[1-9]\d*|0$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非负纯小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非负纯小数(小数点后最多保留一位)
const validateNonnegtivePureDecimalLimit1 = (rule, value, callback) => {
  if (value) {
    const reg = /^(0\.[1-9]|0?)$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非负纯小数(小数点后最多保留一位)'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验整数和小数
const validateIntegerAndDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^(([^0][0-9]+|0)\.([0-9]*)$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]*)$)|^(([1-9]+)$)/;
    if (!reg.test(value)) {
      callback(new Error('请输入整数或小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验整数和小数(小数点后最多保留一位)
const validateIntegerAndDecimalLimit1 = (rule, value, callback) => {
  if (value) {
    const reg = /^(([^0][0-9]+|0)\.([0-9]?)$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]?)$)|^(([1-9]+)$)/;
    if (!reg.test(value)) {
      callback(new Error('请输入整数或小数(小数点后最多保留一位)'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验整数和小数(小数点后最多保留两位)
const validateIntegerAndDecimalLimit2 = (rule, value, callback) => {
  if (value) {
    const reg = /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/;
    if (!reg.test(value)) {
      callback(new Error('请输入整数或小数(小数点后最多保留两位)'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非负的整数和小数
const validateNonnegativeIntegerAndDecimal = (rule, value, callback) => {
  if (value) {
    const reg = /^([1-9]\d*|\d)(.\d*)?$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非负的整数或小数'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非负的整数和小数(小数点后最多保留一位)
const validateNonnegativeIntegerAndDecimalLimit1 = (rule, value, callback) => {
  if (value) {
    const reg = /^([1-9]\d*|\d)(.\d?)?$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非负的整数或小数(小数点后最多保留一位)'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 校验非负的整数和小数(小数点后最多保留两位)
const validateNonnegativeIntegerAndDecimalLimit2 = (rule, value, callback) => {
  if (value) {
    const reg = /^([1-9]\d*|\d)(.\d{1,2})?$/;
    if (!reg.test(value)) {
      callback(new Error('请输入非负的整数或小数(小数点后最多保留两位)'));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

总结

开发中用到的大部分校验都给同学们放到上面了，如果有不全的，评论区提出，后期补上。

ldm-smile

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
公共组件js系列（纯干货）- 最全的表单校验

系列文章目录第一章最全的表单校验工具第二章日期工具提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、大小写字母校验二、中文校验三、用户名校验四、密码强度校验五、电话号码校验六、身份证合法性校验七、车牌号码合法性校验八、金额校验九、IP地址校验十、数值校验前言任何项目的表单提交都需要数据格式，合法性校验，这里将给出最全的表单校验，同学们
复制链接

扫一扫