vue中form 表单常用校验封装（async-validator）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

新建一个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'}
   ]
}

以上是 vue中form 表单常用校验封装（async-validator） 的全部内容， 来源链接： utcz.com/z/379119.html

回到顶部