• 常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等

    1.邮箱校验规则1

    1. //邮箱校验
    2. export const validateEmail = async (RuleObject, value) => {
    3.   // const reg = new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+$/)
    4.   const reg = new RegExp(/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/)
    5.   if (value) {
    6.     if (!reg.test(value)) {
    7.       return Promise.reject('请输入正确的邮箱');
    8.     } else {
    9.       return Promise.resolve();
    10.     }
    11.   } else {
    12.     return Promise.resolve();
    13.   }
    14. }

    2.邮箱校验规则2

    1. export const validateEmail1 = async (RuleObject, value) => {
    2.   const reg = new RegExp(/^(([^<>()[\]\\.,;:\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,}))$/)
    3.   if (value) {
    4.     if (!reg.test(value)) {
    5.       return Promise.reject('请输入正确的邮箱');
    6.     } else {
    7.       return Promise.resolve();
    8.     }
    9.   } else {
    10.     return Promise.resolve();
    11.   }
    12. }

    3.QQ校验规则

    1. //qq校验
    2. export const validateQQ = async (RuleObject, value) => {
    3.   const reg = new RegExp(/^[1-9][0-9]{4,10}$/);
    4.   if (value) {
    5.     if (!reg.test(value)) {
    6.       return Promise.reject('请输入正确的QQ号');
    7.     } else {
    8.       return Promise.resolve();
    9.     }
    10.   } else {
    11.     return Promise.resolve();
    12.   }
    13. }

    4.身份证号码校验规则

    1. //身份证号校验
    2. export const validateIdCard = async (RuleObject, value) => {
    3.   const reg = new RegExp(/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/);
    4.   const reg1 = new RegExp(/^[A-Z]\d{7,11}$/)
    5.   if (value) {
    6.     if (!reg1.test(value)&&!reg.test(value)) {
    7.       return Promise.reject('请输入正确的身份证号');
    8.     } else {
    9.       return Promise.resolve();
    10.     }
    11.   } else {
    12.     return Promise.resolve();
    13.   }
    14. }

    5.微信校验规则

    1. //微信校验
    2. export const validateCharts = async (RuleObject, value) => {
    3.   const reg = new RegExp(/^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/);
    4.   if (value) {
    5.  
    6.     if (!reg.test(value)) {
    7.       return Promise.reject('请输入正确的微信号');
    8.     } else {
    9.       return Promise.resolve();
    10.     }
    11.   } else {
    12.     return Promise.resolve();
    13.   }
    14. }

    6.电话校验规则

    1. //电话校验
    2. export const validatPhone = async (RuleObject, value) => {
    3.   const reg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/);
    4.   if (value) {
    5.  
    6.     if (!reg.test(value)) {
    7.       return Promise.reject('请输入正确的手机号');
    8.     } else {
    9.       return Promise.resolve();
    10.     }
    11.   } else {
    12.     return Promise.resolve();
    13.   }
    14. }

    7.银行卡号校验规则

    1. //银行卡号校验
    2. export const validatBankCard = async (RuleObject, value) => {
    3.   const reg = new RegExp(/^[1-9]\d{9,29}$/);
    4.   if (value) {
    5.     if (!reg.test(value)) {
    6.       return Promise.reject('请输入正确的银行卡号');
    7.     } else {
    8.       return Promise.resolve();
    9.     }
    10.   } else {
    11.     return Promise.resolve();
    12.   }
    13. }

    8.数字字母校验规则

    1. //数字字母校验
    2. export const validatNumberLetter = async (RuleObject, value) => {
    3.   const reg = new RegExp(/^([A-Z]|[a-z]|[\d])*$/);
    4.   if (value) {
    5.     if (!reg.test(value)) {
    6.       return Promise.reject('请输入正确的工号');
    7.     } else {
    8.       return Promise.resolve();
    9.     }
    10.   } else {
    11.     return Promise.resolve();
    12.   }
    13. }

    9.整数校验规则

    1. //整数校验
    2. export const validateInitNumber = async (RuleObject, value, min, max) => {
    3.   if (value !== '' && value !== null && value !== undefined) {
    4.     if (!Number(value) && value !== 0) {
    5.       return Promise.reject('请输入数字');
    6.     } else if (!Number.isInteger(Number(value))) {
    7.       return Promise.reject('请输入整数');
    8.     } else {
    9.       if (max) {
    10.         value = Number(value);
    11.         if (value > max || value < min) {
    12.           return Promise.reject('请输入' + min + '到' + max + '之间的数值');
    13.         } else {
    14.           return Promise.resolve();
    15.         }
    16.       } else {
    17.         return Promise.resolve();
    18.       }
    19.     }
    20.   } else {
    21.     return Promise.resolve();
    22.   }
    23. }

    10.数字校验规则

    1. //数字校验
    2. export const validateNumber = async (RuleObject, value, min, max) => {
    3.   if (value !== '' && value !== null && value !== undefined) {
    4.     if (!Number(value) && value !== 0) {
    5.       return Promise.reject('请输入数字');
    6.     } else {
    7.       if (max) {
    8.         if (value > max || value < min) {
    9.           return Promise.reject('请输入' + min + '到' + max + '之间的数值');
    10.         } else {
    11.           return Promise.resolve();
    12.         }
    13.       } else {
    14.         return Promise.resolve();
    15.       }
    16.     }
    17.   } else {
    18.     return Promise.resolve();
    19.   }
    20. }

    11.文本校验规则

    1. //文本校验
    2. export const validateInitTxt = async (RuleObject, value, min, max) => {
    3.   if (value) {
    4.     if (max) {
    5.       if (value.length > max || value.length < min) {
    6.         return Promise.reject('请输入' + min + '到' + max + '个字符');
    7.       } else {
    8.         return Promise.resolve();
    9.       }
    10.     } else {
    11.       return Promise.resolve();
    12.     }
    13.   } else {
    14.     return Promise.resolve();
    15.   }
    16. }

    12.密码校验规则

    1. //密码校验
    2. export const validatePWD = async (RuleObject, value, min, max) => {
    3.   if (value) {
    4.     if (max) {
    5.       if (value.length > max || value.length < min) {
    6.         return Promise.reject('请输入' + min + '到' + max + '个字符');
    7.       } else {
    8.         return Promise.resolve();
    9.       }
    10.     } else {
    11.       return Promise.resolve();
    12.     }
    13.   } else {
    14.     return Promise.resolve();
    15.   }
    16. }

    最后附上rules中的使用方法

    1. import { validateEmail,validateInitTxt, validateQQ, validateIdCard, validatPhone,validateEmail1, validatBankCard, validateInitNumber,validateNumber,validateCharts,validatNumberLetter  } from './validateForm.js';
    2. export default  {
    3.     '姓名': [
    4.         {
    5.             required: true, message: '请输入名字'
    6.         },
    7.         {
    8.             validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 30), trigger: 'change'
    9.         }
    10.     ],
    11.     '年龄': [
    12.         {
    13.             required: true, message: '请输入年龄'
    14.         },
    15.         {
    16.             validator: async (RuleObject, value) => validateInitNumber(RuleObject, value, 16, 65), trigger: 'change'
    17.         }
    18.     ],
    19.     '身高': [
    20.         {
    21.             required: true, message: '请输入身高'
    22.         },
    23.         {
    24.             validator: async (RuleObject, value) => validateInitNumber(RuleObject, value, 140, 210), trigger: 'change'
    25.         }
    26.     ],
    27.     '体重': [
    28.         {
    29.             required: true, message: '请输入体重'
    30.         },
    31.         {
    32.             validator: async (RuleObject, value) => validateNumber(RuleObject, value, 35, 200), trigger: 'change'
    33.         }
    34.     ],
    35.     '邮件': [
    36.         {
    37.             required: true, message: '请输入邮件'
    38.         },
    39.         {
    40.             validator: validateEmail, trigger: 'change'
    41.         }
    42.     ],
    43.     '邮箱': [
    44.         {
    45.             required: true, message: '请输入邮箱'
    46.         },
    47.         {
    48.             validator: validateEmail1, trigger: 'change'
    49.         }
    50.     ],
    51.     'QQ': [
    52.         {
    53.             required: true, message: '请输入QQ'
    54.         },
    55.         {
    56.             validator: validateQQ, trigger: 'change'
    57.         }
    58.     ],
    59.     '微信': [
    60.         {
    61.             required: true,message: '请输入微信'
    62.         },
    63.  
    64.         {
    65.             validator: validateCharts, trigger: 'change'
    66.         }
    67.     ],
    68.     '身份证': [
    69.         {
    70.             required: true, message: '请输入身份证号'
    71.         },
    72.         {
    73.             validator: validateIdCard, trigger: 'change'
    74.         }
    75.     ],
    76.     '电话': [
    77.         {
    78.             required: true, message: '请输入联系电话'
    79.         },
    80.         {
    81.             validator: validatPhone, trigger: 'change'
    82.         }
    83.     ],
    84.     '银行卡': [
    85.         {
    86.             required: true,message: '请输入银行卡卡号'
    87.         },
    88.         {
    89.             validator: validatBankCard, trigger: 'change'
    90.         }
    91.     ],
    92.     '留言板': [
    93.         {
    94.             required: true,message: '请输入'
    95.         },
    96.         {
    97.             validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 300), trigger: 'change'
    98.         }
    99.     ],
    100.     '输入框50': [
    101.         {
    102.             required: true,message: '请输入'
    103.         },
    104.         {
    105.             validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 50), trigger: 'change'
    106.         }
    107.     ],
    108.     '输入框30': [
    109.         {
    110.             required: true,message: '请输入'
    111.         },
    112.         {
    113.             validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 30), trigger: 'change'
    114.         }
    115.     ],
    116.  
    117.     '下拉框': [
    118.         {
    119.             required: true, message: '请选择'
    120.         }
    121.     ],
    122.     '整数': [
    123.         {
    124.             required: true,message: '请输入'
    125.         },
    126.         {
    127.             validator: validateInitNumber, trigger: 'change'
    128.         }],
    129.     '组合':[
    130.         {
    131.             required: true,message: '请输入'
    132.         },
    133.         {
    134.             validator: validatNumberLetter, trigger: 'change'
    135.         },
    136.     ],
    137.     '浮点数': [
    138.         {
    139.             required: true,message: '请输入'
    140.         },
    141.         {
    142.             validator: validateNumber, trigger: 'change'
    143.         }]
    144.  
    145. }
    146.

  • 相关阅读:
    day09-计算机网络参考模型
    ChatGPT桌面客户端支持gpt4模型，附使用说明
    守护安全|AIRIOT城市天然气综合管理解决方案
    LabVIEW学习笔记十三：窗格详解（调整窗格大小时缩放特定对象）
    EdgeConnect
    JVM调优-配置参数
    (十七)VBA常用基础知识：读写text文件
    ubuntu16.04部署postgrest（无网络）
    SpringBoot添加外部jar包及打包(亲测有效) - 第452篇
    带你了解基于Ploto构建自动驾驶平台
  • 原文地址：https://blog.csdn.net/m0_55333789/article/details/134068431