vue中form表单限制

1、表单验证手机号

phone: [
          {
            required: true,
            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],

2、表单验证限制特殊字符及空格

username: [
          { required: true, trigger: 'blur', validator: validUserName },
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' }
        ],
const validUserName = (rule, value, callback) => {
  let reg =new RegExp("[`~!%@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）|{}【】‘；：”“'\"。，、？]");
  if(reg.test(value)){
     return callback("不能输入该特殊字符")
  }else{
     return callback();
  }
}

3、表单验证限制邮箱

email: [
          { required: false, trigger: 'blur', validator: validEmail }
        ],
const validEmail = (rule, value, callback) => {
      if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }

4、表单验证限制邮编

postcode: [
          { type: 'number', required: false, trigger: 'blur', validator: validPostCode }
        ],
const validPostCode = (rule, value, callback) => {
      if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error('邮编格式不正确'))
      } else {
        callback()
      }
    }

5、表单验证密码3种方式验证及重复密码

passxinword: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          { required: true, validator: validatePass , trigger: "blur" }
        ],
        passroleword: [
          {
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          },
          {
            validator: checkPhone2,
            trigger: 'blur',
            required: true
          }
        ],
var validatePass = (rule, value, callback) => {
   //必须包含⼤⼩写字母、数字、特殊字符长度再9-16位之间
    var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,16}");
      if (value === "") {
          callback(new Error("请输⼊密码"));
      } else if (value.length < 9 || value.length > 16) {
        callback(new Error("请输⼊9~16位密码"));
      } else if (!regex.test(value)) {
        callback(new Error("密码必须同时包含字母、数字和特殊字符其中三项"));
      } else {
        callback();
      }
    }
    let checkPhone2 = (rule, value, callback) => {
      if(value !== this.loginForm.passxinword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }

6、表单验证社会信用代码

socialCreditCode: [
        {
        required: true,
        message: '统一社会信用代码不能为空',
        trigger: 'change'
        },
        {
            validator: validateCreditCode,
            trigger: 'blur'
        }
        ],
let validateCreditCode = (rule, value, callback) => {
      if (!value) {
          return callback(new Error('统一社会信用代码不能为空'))
      }
      setTimeout(() => {
          if (CheckSocialCreditCode(value.trim()) === true) {
            callback()
          } 
          else {
            callback(new Error('请输入正确的统一社会信用代码'))
          }
      }, 100)
    }
export function CheckSocialCreditCode (Code) {
  let patrn = /^[0-9A-Z]+$/ // 18位校验及大写校验
  if (Code.length !== 18 || patrn.test(Code) === false) {
    return false
  } else {
    let Ancode // 统一社会信用代码的每一个值
    let Ancodevalue // 统一社会信用代码每一个值的权重
    let total = 0
    let weightedfactors = [1,3,9,27,19,26,16,17,20,29,25,13,8,24,10,30,28] // 加权因子
    let str = '0123456789ABCDEFGHJKLMNPQRTUWXY' // 不用I、O、S、V、Z
    for (let i = 0; i < Code.length - 1; i++) {
      Ancode = Code.substring(i, i + 1)
      Ancodevalue = str.indexOf(Ancode)
      total = total + Ancodevalue * weightedfactors[i] // 权重与加权因子相乘之和
    }
    let logiccheckcode = 31 - (total % 31)
    if (logiccheckcode === 31) {
      logiccheckcode = 0
    }
    let Str =
      '0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y'
    // eslint-disable-next-line camelcase
    let Array_Str = Str.split(',')
    logiccheckcode = Array_Str[logiccheckcode]
    let checkcode = Code.substring(17, 18)
    if (logiccheckcode !== checkcode) {
      return false
    }
    return true
  }
}

7、表单验证身份证号码

adminIdCardNo: [
          {
            required: true,
            message: '身份号码不能为空',
            trigger: 'blur'
          },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入合法的身份号码',
            trigger: 'blur'
          }
        ],

8、v-model.trim表单强制前后不让输入空格