vue常用的时间、手机号等的格式化方法

这篇博客分享了Vue.js中手机号格式化、文本复制、日期格式化、身份证验证等实用方法,还涵盖了邮箱、手机、URL、日期格式验证等,并提供了设备判断、JSON字符串检查、数组和对象检测等工具函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue常用的时间、手机号等的格式化方法

/**
 * 手机号格式化
 */
export function phoneFilter(val) {
  let str = "";
  str = val.substr(0, 3) + "****" + val.substr(val.length - 4);
  return str;
}

/**
 * h5兼容安卓和苹果的复制文本
 */
export function copyText(contentUrl) {
  let oInput = document.createElement("input");
  oInput.type = "text";
  oInput.value = contentUrl;
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象
  document.execCommand("Copy"); // 执行浏览器复制命令
  oInput.parentNode.removeChild(oInput); //执行完之后删除该对象
}
/**
 * 检测手机号格式
 */
export function checkPhone(value) {
  var phone = value;
  if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)) {
    return false;
  } else {
    return true;
  }
}

/**
 * 日期格式化,时间戳
 */
export function format_date(dateDemo, format = "yyyy-MM-dd hh:mm:ss") {
  let date = new Date(dateDemo * 1000);
  if (date !== "Invalid Date") {
    var o = {
      "M+": date.getMonth() + 1, // month
      "d+": date.getDate(), // day
      "h+": date.getHours(), // hour
      "m+": date.getMinutes(), // minute
      "s+": date.getSeconds(), // second
      "q+": Math.floor((date.getMonth() + 3) / 3), // quarter
      S: date.getMilliseconds(), // millisecond
    };
    if (/(y+)/.test(format)) {
      format = format.replace(
        RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(format)) {
        format = format.replace(
          RegExp.$1,
          RegExp.$1.length === 1
            ? o[k]
            : ("00" + o[k]).substr(("" + o[k]).length)
        );
      }
    }
    return format;
  }
  return "";
}
/**
 * 验证身份证号
 */
export function isCardNo(card) {
  // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if (reg.test(card) === false) {
    return false;
  } else {
    return true;
  }
}
/**
 * 获取url中的query参数
 * @param {*} name 
 */
export function getQueryString(name) {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  let url = window.location.hash.split('?')[1]? window.location.hash.split('?')[1].match(reg): null;
  // console.log(url)
  if (url != null) {
    return decodeURI(url[2])//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
  } else {
    return null
  }
}
//由身份证号计算年龄
function getAge(id){
  // 1、先判断身份证号的正确性
  // 2、判断是否在世
  const year = id.substr(6,4)
  const month = id.substr(10,2)
  const day = id.substr(12,2)
  
  const timeBrth = new Date(`${year}/${month}/${day}`).getTime()
  const timeNow = new Date().getTime()
  const longTime = timeNow - timeBrth
  const days = longTime / (1*24*60*60*1000)
  
  let result = ''
  if(days<31){
  result = parseInt(days) + '天'
  }else if(days<365){
   result = `${parseInt(days/30)}${parseInt(days%30)}`
  }else{
   result = `${parseInt(days/365)}${parseInt(days%365/30)}${parseInt(days%365%30)}`
  }
  return result 
}
//判断数据类型
function _typeof(item){
            let res=Object.prototype.toString.call(item);
            res = res.split(" ")[1];
            res=res.substr(0,res.length-1);
            return res;

}
//由身份证号判断性别
function getSex(id){
  // 1、先判断身份证号的正确性
  const sex = id.substr(16,1)
  return sex%2? '男': '女'
}
//函数节流
function throttle (func, wait ,type) { //函数节流 [func 函数 wait 延迟执行毫秒数 type 1 表时间戳版,2 表定时器版]
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();
            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}
//函数防抖
function debounce (func, wait, immediate) { //函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行,然后n秒内不触发事件才能继续执行函数的效果]
  let timeout;
  return function() {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      var callNow = !timeout;
      timeout = setTimeout(() => {
        timeout = null;
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait);
    }
  }
}
//阿拉伯数字转中文大写数字
function numberToChinese (num) { // 将阿拉伯数字翻译成中文的大写数字
  let AA = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十')
  let BB = new Array('', '十', '百', '仟', '萬', '億', '点', '')
  let a = ('' + num).replace(/(^0*)/g, '').split('.')
  let k = 0
  let re = ''
  for (let i = a[0].length - 1; i >= 0; i--) {
    switch (k) {
      case 0:
        re = BB[7] + re
        break
      case 4:
        if (!new RegExp('0{4}//d{' + (a[0].length - i - 1) + '}$').test(a[0])) {
          re = BB[4] + re
        }
        break
      case 8:
        re = BB[5] + re
        BB[7] = BB[5]
        k = 0
        break
    }
    if (k % 4 === 2 && a[0].charAt(i + 2) !== 0 && a[0].charAt(i + 1) === 0) {
      re = AA[0] + re
    }
    if (a[0].charAt(i) !== 0) {
      re = AA[a[0].charAt(i)] + BB[k % 4] + re
    }
    k++
  }
  if (a.length > 1) { // 加上小数部分(如果有小数部分)
    re += BB[6]
    for (let i = 0; i < a[1].length; i++) {
      re += AA[a[1].charAt(i)]
    }
  }
  if (re === '一十') {
    re = '十'
  }
  if (re.match(/^一/) && re.length === 3) {
    re = re.replace('一', '')
  }
  return re
}
//去除字符串空格
function trim (str, type) { // 去除空格, type:  1-所有空格  2-前后空格  3-前空格 4-后空格
  type = type || 1
  switch (type) {
    case 1:
      return str.replace(/\s+/g, '')
    case 2:
      return str.replace(/(^\s*)|(\s*$)/g, '')
    case 3:
      return str.replace(/(^\s*)/g, '')
    case 4:
      return str.replace(/(\s*$)/g, '')
    default:
      return str
  }
}
//设备判断:android、ios、web
function isDevice () { // 判断是android还是ios还是web
  var ua = navigator.userAgent.toLowerCase()
  if (ua.match(/iPhone\sOS/i) === 'iphone os' || ua.match(/iPad/i) === 'ipad') { // ios
    return 'iOS'
  }
  if (ua.match(/Android/i) === 'android') {
    return 'Android'
  }
  return 'Web'
}
/**
 * 验证电子邮箱格式
 */
function email(value) {
	return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);
}

/**
 * 验证手机格式
 */
function mobile(value) {
	return /^1[3-9]\d{9}$/.test(value)
}

/**
 * 验证URL格式
 */
function url(value) {
	return /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/.test(value)
}

/**
 * 验证日期格式
 */
function date(value) {
	return !/Invalid|NaN/.test(new Date(value).toString())
}

/**
 * 验证ISO类型的日期格式
 */
function dateISO(value) {
	return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
}

/**
 * 验证十进制数字
 */
function number(value) {
	return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
}

/**
 * 验证整数
 */
function digits(value) {
	return /^\d+$/.test(value)
}

/**
 * 验证身份证号码
 */
function idCard(value) {
	return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
		value)
}

/**
 * 是否车牌号
 */
function carNo(value) {
	// 新能源车牌
	const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
	// 旧车牌
	const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
	if (value.length === 7) {
		return creg.test(value);
	} else if (value.length === 8) {
		return xreg.test(value);
	} else {
		return false;
	}
}

/**
 * 金额,只允许2位小数
 */
function amount(value) {
	//金额,只允许保留两位小数
	return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
}

/**
 * 中文
 */
function chinese(value) {
	let reg = /^[\u4e00-\u9fa5]+$/gi;
	return reg.test(value);
}

/**
 * 只能输入字母
 */
function letter(value) {
	return /^[a-zA-Z]*$/.test(value);
}

/**
 * 只能是字母或者数字
 */
function enOrNum(value) {
	//英文或者数字
	let reg = /^[0-9a-zA-Z]*$/g;
	return reg.test(value);
}

/**
 * 验证是否包含某个值
 */
function contains(value, param) {
	return value.indexOf(param) >= 0
}

/**
 * 验证一个值范围[min, max]
 */
function range(value, param) {
	return value >= param[0] && value <= param[1]
}

/**
 * 验证一个长度范围[min, max]
 */
function rangeLength(value, param) {
	return value.length >= param[0] && value.length <= param[1]
}

/**
 * 是否固定电话
 */
function landline(value) {
	let reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/;
	return reg.test(value);
}

/**
 * 判断是否为空
 */
function empty(value) {
	switch (typeof value) {
		case 'undefined':
			return true;
		case 'string':
			if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
			break;
		case 'boolean':
			if (!value) return true;
			break;
		case 'number':
			if (0 === value || isNaN(value)) return true;
			break;
		case 'object':
			if (null === value || value.length === 0) return true;
			for (var i in value) {
				return false;
			}
			return true;
	}
	return false;
}

/**
 * 是否json字符串
 */
function jsonString(value) {
	if (typeof value == 'string') {
		try {
			var obj = JSON.parse(value);
			if (typeof obj == 'object' && obj) {
				return true;
			} else {
				return false;
			}
		} catch (e) {
			return false;
		}
	}
	return false;
}


/**
 * 是否数组
 */
function array(value) {
	if (typeof Array.isArray === "function") {
		return Array.isArray(value);
	} else {
		return Object.prototype.toString.call(value) === "[object Array]";
	}
}

/**
 * 是否对象
 */
function object(value) {
	return Object.prototype.toString.call(value) === '[object Object]';
}

/**
 * 是否短信验证码
 */
function code(value, len = 6) {
	return new RegExp(`^\\d{${len}}$`).test(value);
}


export default {
	throttle,
	debounce,
	numberToChinese,
	trim,
	isDevice,
	email,
	mobile,
	url,
	date,
	dateISO,
	number,
	digits,
	idCard,
	carNo,
	amount,
	chinese,
	letter,
	enOrNum,
	contains,
	range,
	rangeLength,
	empty,
	isEmpty: empty,
	jsonString,
	landline,
	object,
	array,
	code
}
### 实现带地区选择的手机号输入框 为了实现在 Vue使用 `element-ui` 创建带有地区选择功能的手机号输入框,可以按照以下方式构建: #### 安装依赖库 首先确保已经安装了 `element-ui` 库[^1]。 ```bash npm install --save element-ui ``` #### 导入并初始化 ElementUI 和样式文件 在项目的入口文件中引入必要的模块和 CSS 文件: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` #### 构建表单组件 接下来,在模板部分定义一个组合式的输入区域,其中包含国家/地区的下拉菜单以及电话号码输入框。这里需要注意的是对于 `el-input` 输入框设置特定规则来保证只接受有效的手机号码格式[^3]。 ```html <template> <div class="phone-input-container"> <!-- 地区选择 --> <el-select v-model="selectedRegion" placeholder="请选择地区"> <el-option label="+86 (中国)" value="+86"></el-option> <el-option label="+1 (美国)" value="+1"></el-option> <!-- 可继续添加更多选项... --> </el-select> <!-- 手机号输入框 --> <el-input :placeholder="'请输入' + selectedRegion + '手机号'" @input="handleInput" oninput="if(this.value.length>11)this.value=this.value.slice(0,11)" type="text" ref="phoneNumberInput" ></el-input> <!-- 显示完整的国际号码 --> <span>{{ fullPhoneNumber }}</span> </div> </template> ``` #### 添加脚本逻辑处理 最后编写 JavaScript 部分用来管理数据绑定、事件监听器和其他交互行为: ```javascript <script> export default { data() { return { selectedRegion: '+86', phoneNumber: '' }; }, computed: { // 计算属性用于显示完整的国际号码 fullPhoneNumber() { return `${this.selectedRegion} ${this.phoneNumber}`; } }, methods: { handleInput(event) { let inputValue = event.target.value.replace(/\D/g,''); // 移除非数字字符 this.$refs.phoneNumberInput.value = inputValue; this.phoneNumber = inputValue; if(inputValue.length > 11){ alert('手机号长度超出限制'); this.phoneNumber = inputValue.substring(0, 11); } } } }; </script> ``` 通过上述方法可以在 Vue.js 应用程序中利用 `element-ui` 来创建具有地区选择功能的手机号输入框,并且能够有效地控制输入的内容仅限于合法的手机号格式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值