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

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

1.邮箱校验规则1

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

2.邮箱校验规则2

export const validateEmail1 = async (RuleObject, value) => {
  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,}))$/)
  if (value) {
    if (!reg.test(value)) {
      return Promise.reject('请输入正确的邮箱');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

3.QQ校验规则

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

4.身份证号码校验规则

//身份证号校验
export const validateIdCard = async (RuleObject, value) => {
  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)$)/);
  const reg1 = new RegExp(/^[A-Z]\d{7,11}$/)
  if (value) {
    if (!reg1.test(value)&&!reg.test(value)) {
      return Promise.reject('请输入正确的身份证号');
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

5.微信校验规则

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

6.电话校验规则

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

7.银行卡号校验规则

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

8.数字字母校验规则

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

9.整数校验规则

//整数校验
export const validateInitNumber = async (RuleObject, value, min, max) => {
  if (value !== '' && value !== null && value !== undefined) {
    if (!Number(value) && value !== 0) {
      return Promise.reject('请输入数字');
    } else if (!Number.isInteger(Number(value))) {
      return Promise.reject('请输入整数');
    } else {
      if (max) {
        value = Number(value);
        if (value > max || value < min) {
          return Promise.reject('请输入' + min + '到' + max + '之间的数值');
        } else {
          return Promise.resolve();
        }
      } else {
        return Promise.resolve();
      }
    }
  } else {
    return Promise.resolve();
  }
}

10.数字校验规则

//数字校验
export const validateNumber = async (RuleObject, value, min, max) => {
  if (value !== '' && value !== null && value !== undefined) {
    if (!Number(value) && value !== 0) {
      return Promise.reject('请输入数字');
    } else {
      if (max) {
        if (value > max || value < min) {
          return Promise.reject('请输入' + min + '到' + max + '之间的数值');
        } else {
          return Promise.resolve();
        }
      } else {
        return Promise.resolve();
      }
    }
  } else {
    return Promise.resolve();
  }
}

11.文本校验规则

//文本校验
export const validateInitTxt = async (RuleObject, value, min, max) => {
  if (value) {
    if (max) {
      if (value.length > max || value.length < min) {
        return Promise.reject('请输入' + min + '到' + max + '个字符');
      } else {
        return Promise.resolve();
      }
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

12.密码校验规则

//密码校验
export const validatePWD = async (RuleObject, value, min, max) => {
  if (value) {
    if (max) {
      if (value.length > max || value.length < min) {
        return Promise.reject('请输入' + min + '到' + max + '个字符');
      } else {
        return Promise.resolve();
      }
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.resolve();
  }
}

最后附上rules中的使用方法

import { validateEmail,validateInitTxt, validateQQ, validateIdCard, validatPhone,validateEmail1, validatBankCard, validateInitNumber,validateNumber,validateCharts,validatNumberLetter  } from './validateForm.js';
export default  {
    '姓名': [
        {
            required: true, message: '请输入名字'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 30), trigger: 'change'
        }
    ],
    '年龄': [
        {
            required: true, message: '请输入年龄'
        },
        {
            validator: async (RuleObject, value) => validateInitNumber(RuleObject, value, 16, 65), trigger: 'change'
        }
    ],
    '身高': [
        {
            required: true, message: '请输入身高'
        },
        {
            validator: async (RuleObject, value) => validateInitNumber(RuleObject, value, 140, 210), trigger: 'change'
        }
    ],
    '体重': [
        {
            required: true, message: '请输入体重'
        },
        {
            validator: async (RuleObject, value) => validateNumber(RuleObject, value, 35, 200), trigger: 'change'
        }
    ],
    '邮件': [
        {
            required: true, message: '请输入邮件'
        },
        {
            validator: validateEmail, trigger: 'change'
        }
    ],
    '邮箱': [
        {
            required: true, message: '请输入邮箱'
        },
        {
            validator: validateEmail1, trigger: 'change'
        }
    ],
    'QQ': [
        {
            required: true, message: '请输入QQ'
        },
        {
            validator: validateQQ, trigger: 'change'
        }
    ],
    '微信': [
        {
            required: true,message: '请输入微信'
        },
        {
            validator: validateCharts, trigger: 'change'
        }
    ],
    '身份证': [
        {
            required: true, message: '请输入身份证号'
        },
        {
            validator: validateIdCard, trigger: 'change'
        }
    ],
    '电话': [
        {
            required: true, message: '请输入联系电话'
        },
        {
            validator: validatPhone, trigger: 'change'
        }
    ],
    '银行卡': [
        {
            required: true,message: '请输入银行卡卡号'
        },
        {
            validator: validatBankCard, trigger: 'change'
        }
    ],
    '留言板': [
        {
            required: true,message: '请输入'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 300), trigger: 'change'
        }
    ],
    '输入框50': [
        {
            required: true,message: '请输入'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 50), trigger: 'change'
        }
    ],
    '输入框30': [
        {
            required: true,message: '请输入'
        },
        {
            validator: async (RuleObject, value) => validateInitTxt(RuleObject, value, 1, 30), trigger: 'change'
        }
    ],
    '下拉框': [
        {
            required: true, message: '请选择'
        }
    ],
    '整数': [
        {
            required: true,message: '请输入'
        },
        {
            validator: validateInitNumber, trigger: 'change'
        }],
    '组合':[
        {
            required: true,message: '请输入'
        },
        {
            validator: validatNumberLetter, trigger: 'change'
        },
    ],
    '浮点数': [
        {
            required: true,message: '请输入'
        },
        {
            validator: validateNumber, trigger: 'change'
        }]
}


目录
相关文章
|
4月前
|
数据安全/隐私保护
常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等
常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等
64 0
|
1月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1月前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
2天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
|
12天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
13天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
|
19天前
|
数据采集 存储 人工智能
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
39 0
|
19天前
|
人工智能 机器人 API
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
28 0

热门文章

最新文章