vue中form 表单常用校验封装(async-validator)
新建一个js校验文件validate.js
export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$/, naturalNumberMsg: '请输入自然数', // 微信号 wechat: /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/, wechatMsg: '请输入正确的微信号码', // 英文 english: /^.[A-Za-z]+$/, englishMsg: '请输入英文字符', // 座机 telephone: /^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/, telephoneMsg: '请输入正确的座机号', // 银行卡号码 bankCard: /^[1-9]\d{9,19}$/, bankCardMsg: '请输入正确的银行卡号码', // 证件号码 IDNumber: /^[a-z0-9A-Z]{0,50}$/, IDNumberMsg: '请输入正确的证件号码', // 身份证号码,包括15位和18位的 IDCard: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/, IDCardMsg: '请输入正确的身份证号码', // QQ号码 qq: /^[1-9]\d{4,11}$/, qqMsg: '请输入正确的QQ号码', // 网址, 仅支持http和https开头的 url: /^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?$/, urlMsg: '请输入以http和https开头的网址', // 0到20位的英文字符和数字 enNum0to20: /^[a-z0-9A-Z]{0,20}$/, enNum0to20Msg: '请输入20位以内的英文字符和数字', // 2到100位的中英文字符和空格 cnEnSpace2to100: /^[a-zA-Z\u4E00-\u9FA5\s*]{2,100}$/, cnEnSpace2to100Msg: '请输入2到100位的中英文字符和空格', // 数字和换行符 numLinefeed: /^[0-9\n*]+$/, numLinefeedMsg: '请输入数字和换行符', // 255位以内的字符 char0to255: /^.{0,255}$/, char0to255Msg: '请输入255位以内的字符', // 特殊字符 specialChar: /^[^`~!@#$^&*()=|{}':;',/\\[\].<>?]*$/, specialCharMsg: '请删除特殊字符', // 保留两位小数 twoDecimal: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[0-9][0-9]*\.\d{1,2})))$/, twoDecimalMsg: '小数点保留最多两位' } /** * @description 排序值验证,排序值不可以大于255 */ export const validateOrder = function (rule, value, callback) { if (parseInt(value) > 255) { return callback(new Error('排序值不可以大于255')) } else { callback() } }
使用的时候在vue文件中引入该js及需要用的函数
import {regular, validateOrder} from '@/libs/validate'
rules: { name: [ {pattern: regular.cnEnSpace2to100, message: regular.cnEnSpace2to100Msg, trigger: 'blur'} ], mobile: [ {pattern: regular.mobile, message: '请输入正确的手机号码', trigger: 'blur'} ], telephone: [ {pattern: regular.telephone, message: regular.telephoneMsg, trigger: 'blur'} ], email: [ {type: 'email', message: '请输入正确的邮箱', trigger: 'blur'} ], idcard: [ {pattern: regular.IDNumber, message: '请输入正确的证件号码', trigger: 'blur'}
],
bankCard: [
{pattern: regular.bankCard, message: '请输入正确的银行卡号码', trigger: 'blur'}
],
order: [
{type: 'string', validator: validateOrder, trigger: 'blur'}
]
}