vue---弹窗内的表单验证rules以及validate.js正则表达式

import {validataNumber,validateFixedTwo} from "@/utils/validate"


/........validate......./
//纯数字
export function validataNumber(str){
    const reg = /^([0-9]*$/
    return reg.test(str)
}
//非0开头纯数字
export function validataNumber(str){
    const reg = /^([1-9]\d{0,9})$/
    return reg.test(str)
}
//纯数字带小数点2位
export function validateFixedTwo(str){
    const reg = /^([1-9]\d{0,9}|0)([.]?|\.\d{1,2})?$/
    return reg.test(str)
}
/............@keydown.native="handleInputNumber"......./
handleInputNumber(e){
   e.target.value = e.target.value.replace(/^([0-9]*$/,"")
},
handleInputFixedTwo(e){
   const reg = /^([1-9]\d{0,9}|0)([.]?|\.\d{1,2})?$/
   e.target.value = e.target.value.replace(reg ,"")
}

//mixins....rules.......
export default {
   data(){
	const numberValid =(rule,value,callback)=>{
    if(!validataNumber(value)){
        return callback(new Error('请输入正确格式'))
    }else{
        callback()
    }
    }
    const numberFixedTwo =(rule,value,callback)=>{
        if(!validateFixedTwo(value)){
            return callback(new Error('请输入正确格式'))
        }else{
            callback()
        }
    }
   return {
        rules:{
            applyNo:[{required:true,message:'请输入编号',trigger:'blur'},{min:13,max:19,message:"13-19位数字"}{validator:numberValid}],
            feeMoeny:[{required:true,message:'请输入编号',trigger:'blur'},{validator:numberFixedTwo}]
        }
   }
}
}

 

//判断两个对象相等
function isObjectValueEqual(a, b) {   
 
     //取对象a和b的属性名
 
    var aProps = Object.getOwnPropertyNames(a);
 
    var bProps = Object.getOwnPropertyNames(b);
 
     //判断属性名的length是否一致
 
    if (aProps.length != bProps.length) {
 
        return false;
 
    }
 
     //循环取出属性名,再判断属性值是否一致
 
    for (var i = 0; i < aProps.length; i++) {
 
        var propName = aProps[i];
 
        if (a[propName] !== b[propName]) {
 
            return false;

        }
 
    }
 
    return true;
 
}

/* 字段不能全为空白字符 */
export function isNotBlankInput(str) {
  return str && str.trim().length > 0
}

/* 合法用户名称 */
export function isvalidUsername(str) {
  const reg = /^[a-zA-Z0-9_-]+((\.)?[a-zA-Z0-9_-]+)+$/
  return reg.test(str.trim())
}

/* 合法uri*/
export function validateURL(textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}

/* 小写字母*/
export function validateLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/* 大写字母*/
export function validateUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/* 大小写字母*/
export function validatAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}
/** 纯数字 */
export function validateNumber(str) {
  const reg = /^[0-9]*$/
  console.log(2222, reg.test(str))
  return reg.test(str)
}
/** 不能出现汉字的 */
export function validateNoChinese(str) {
  const reg = /^[^\u4e00-\u9fa5]+$/
  return reg.test(str)
}

/** 长度不能大于1000 */
export function validateLengthForOneThousand(str) {
  if (str && str.length <= 1000) {
    return true
  } else {
    return false
  }
}
/** 地址长度不能大于 512 */
export function validateLengthForFiveThousand(str) {
  if (str && str.length <= 512) {
    return true
  } else {
    return false
  }
}
/** 长度不能大于300*/
export function validateLengthForThreeHundred(str) {
  if (str && str.length <= 300) {
    return true
  } else {
    return false
  }
}
/** 输入名称长度 不能大于100 */
export function validateLengthForOneHundred(str) {
  if (str && str.length <= 100) {
    return true
  } else {
    return false
  }
}
/** 长度不能超过64 */
export function validateLengthForSixtyFor(str) {
  if (str && str.length <= 64) {
    return true
  } else {
    return false
  }
}
/** 长度不能超过32 */
export function validateLengthForThirtyTwo(str) {
  if (str && str.length <= 32) {
    return true
  } else {
    return false
  }
}
/** 长度不能超过16 */
export function validateLengthForSixteen(str) {
  if (str && str.length <= 16) {
    return true
  } else {
    return false
  }
}
/** 电话号码 */
export function isvalidPhone(str) {
  const reg = /^1(3|4|5|6|7|8|9)\d{9}$/
  return reg.test(str)
}
/**
 * 判断手机号码是否正确
 */
export function isvalidatemobile(phone) {
  const list = []
  let result = true
  let msg = ''
  var isPhone = /^0\d{2,3}-?\d{7,8}$/
  // 增加134 减少|1349[0-9]{7},增加181,增加145,增加17[678]
  var isMob = /^((\+?86)|(\(\+86\)))?(13[0123456789][0-9]{8}|15[012356789][0-9]{8}|18[012356789][0-9]{8}|14[57][0-9]{8}|17[3678][0-9]{8})$/
  if (!validatenull(phone)) {
    if (phone.length == 11) {
      if (isPhone.test(phone)) {
        msg = '手机号码格式不正确'
      } else {
        result = false
      }
    } else {
      msg = '手机号码长度不为11位'
    }
  } else {
    msg = '手机号码不能为空'
  }
  list.push(result)
  list.push(msg)
  return list
}
/** 货币 */
export function ismoney(str) {
  const reg = /^[0-9]+([.]{1}[0-9]+){0,1}$/
  return reg.test(str)
}

/** email校验 */
export function isvalidEmail(str) {
  const reg = /^[a-z0-9]+([._\\\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
  return reg.test(str)
}

/** 身份证校验1 */
// export function isvalidIdCard(str) {
//   const reg = /^[1-9]{1}[0-9]{5}(19|20)[0-9]{2}((0[1-9]{1})|(1[0-2]{1}))((0[1-9]{1})|([1-2]{1}[0-9]{1}|(3[0-1]{1})))[0-9]{3}[0-9xX]{1}$/
//   return reg.test(str)
// }

// 身份证校验2
/**
	 * 检验身份证号码是否符合规范
	 *
	 * @param IDStr 身份证号码
	 * @return 错误信息或成功null
	 */
export function isvalidIdCard(IDStr) {
  var tipInfo = null// 记录错误信息
  var Ai = ''
  // 判断号码的长度 15位或18位
  if (IDStr.length !== 15 && IDStr.length !== 18) {
    tipInfo = '身份证号码长度应该为15位或18位'
    return tipInfo
  }
  // 18位身份证前17位位数字,如果是15位的身份证则所有号码都为数字
  if (IDStr.length === 18) {
    Ai = IDStr.substring(0, 17)
  } else if (IDStr.length === 15) {
    Ai = IDStr.substring(0, 6) + '19' + IDStr.substring(6, 15)
  }
  if (validateNumber(Ai) === false) {
    tipInfo = '身份证15位号码都应为数字 ; 18位号码除最后一位外,都应为数字'
    return tipInfo
  }
  // 判断出生年月是否有效
  var strYear = Ai.substring(6, 10)// 年份
  var strMonth = Ai.substring(10, 12)// 月份
  var strDay = Ai.substring(12, 14)// 日期
  if (isDate(strYear + '-' + strMonth + '-' + strDay) === false) {
    tipInfo = '身份证出生日期无效'
    return tipInfo
  }

  var date = new Date()
  try {
    if ((date.getFullYear() - parseInt(strYear)) > 150 ||
      (date.getTime() - new Date(strYear + '-' + strMonth + '-' + strDay).getTime()) < 0) {
      tipInfo = '身份证生日不在有效范围'
      return tipInfo
    }
  } catch (e) {
    console.error('格式错误', e)
    tipInfo = '身份证日期无效'
    return tipInfo
  }

  if (parseInt(strMonth) > 12 || parseInt(strMonth) === 0) {
    tipInfo = '身份证月份无效'
    return tipInfo
  }
  if (parseInt(strDay) > 31 || parseInt(strDay) === 0) {
    tipInfo = '身份证日期无效'
    return tipInfo
  }

  // 判断地区码是否有效
  if (!GetAreaCode(Ai) === undefined) {
    tipInfo = '身份证地区编码错误。'
    return tipInfo
  }
  if (isVarifyCode(Ai, IDStr) === false) {
    tipInfo = '身份证校验码无效,不是合法的身份证号码'
    return tipInfo
  }
  // console.log(4444, tipInfo)

  return tipInfo
}

/**
 * 功能:判断字符串出生日期是否符合正则表达式:包括年月日,闰年、平年和每月31天、30天和闰月的28天或者29天
 *
 * @param string
 * @return true, 符合; false, 不符合。
 */
export function isDate(strDate) {
  // var pattern = /^((\\d{2}(([02468][048])|([13579][26]))[\\-\\/\\s]?((((0?[13578])|(1[02]))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])))))|(\\d{2}(([02468][1235679])|([13579][01345789]))[\\-\\/\\s]?((((0?[13578])|(1[02]))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\\-\\/\\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))?$/
  const pattern = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/
  // 上面一个是后后端统一的 但是跑不过去 暂时用下一个
  return pattern.test(strDate)
}

// 如果身份证前两位的地区码不在Hashtable,则地区码有误 返回true 或 undefined
export function GetAreaCode(Ai) {
  var areacode = ['11', '12', '13', '14', '15', '21', '22', '23', '31', '32', '33',
    '34', '35', '36', '37', '41', '42', '43', '44', '45', '46', '50', '51', '52', '53',
    '54', '61', '62', '63', '64', '65', '71', '81', '82', '91']

  for (let index = 0; index < areacode.length; index++) {
    const element = areacode[index]
    if (element === Ai.substring(0, 2)) {
      return true
    }
  }
}

/*
 * 判断第18位校验码是否正确 第18位校验码的计算方式:
 1. 对前17位数字本体码加权求和 公式为:S = Sum(Ai * Wi), i = 0, ... , 16
 * 其中Ai表示第i个位置上的身份证号码数字值,Wi表示第i位置上的加权因子,其各位对应的值依次为: 7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4
 * 2
  2. 用11对计算结果取模 Y = mod(S, 11)
 3. 根据模的值得到对应的校验码 对应关系为: Y值: 0 1 2 3 4 5 6 7 8 9 10
 * 校验码: 1 0 X 9 8 7 6 5 4 3 2
 */
export function isVarifyCode(Ai, IDStr) {
  var VarifyCode = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
  var Wi = ['7', '9', '10', '5', '8', '4', '2', '1', '6', '3', '7', '9',
    '10', '5', '8', '4', '2']
  var sum = 0
  for (var i = 0; i < 17; i++) {
    sum = sum + parseInt(Ai.charAt(i)) *
      parseInt(Wi[i])
  }

  var modValue = sum % 11

  var strVerifyCode = VarifyCode[modValue]

  Ai = Ai + strVerifyCode
  if (IDStr.length === 18) {
    if (Ai !== IDStr) {
      return false
    }
  }
  return true
}

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Element UI库中的`el-form`和`el-input`组件结合使用,来实现电话号码的表单验证。 首先,您需要在Vue组件中引入相关的组件和验证规则: ```javascript <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="电话号码" prop="phone"> <el-input v-model="form.phone"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { phone: '' }, rules: { phone: [ { required: true, message: '请输入电话号码', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,进行提交操作 // TODO: 提交逻辑 } else { // 表单验证不通过,进行错误处理 return false; } }); } } } </script> ``` 在上述的代码中,我们定义了一个包含电话号码字段的表单,并为该字段设置了必填和格式校验规则。其中,`required`表示该字段必填,`pattern`用于设置电话号码的正则表达式,确保它符合手机号码的格式。`trigger: 'blur'`表示在失去焦点时进行校验。 最后,通过`this.$refs.form.validate`方法触发表单校验,如果校验通过,则可以执行提交操作,否则进行错误处理。 请注意,上述代码中使用了Element UI的组件库,您需要先引入Element UI并在项目中注册相应组件才能正常使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值