1.邮箱校验规则
电子邮件地址由由字母、数字、下划线或短横线组成的用户名部分，后跟@符号，然后是一个或多个由字母和数字组成的域名部分，最后以.com、.cn、.net或.org为结尾
//邮箱校验 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.邮箱校验规则
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(); } }
最后附上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' }] }
