vue验证手机号、密码验证码、时间、机型、图片类型等

船长在船上

已于 2022-04-22 08:57:37 修改

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端开发 Vue 文章标签： vue.js

于 2021-12-17 15:54:56 首次发布

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/121998009

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

前端开发

140 篇文章

订阅专栏

本文介绍了一组实用的JavaScript函数，用于验证手机号、验证码、密码等输入的有效性，并提供了日期格式化、图片类型判断等功能。这些工具函数能够帮助开发者简化前端验证逻辑，提升用户体验。

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

新建util.js ：


//   验证手机号
const testPhone = (resPhone) => {
    console.log(resPhone, "resPhone")
    let phone = new Promise((resolve, reject) => {
        const reg = /^1[3|4|5|7|8|9][0-9]d{8}$/;
        if (resPhone == "" || resPhone == undefined || resPhone == null || resPhone.length == 0) {
            Toast("手机号不能为空");
            resolve(false);
        } else if (!reg.test(resPhone)) {
            Toast("手机号格式不正确");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return phone;
};
// 验证验证码是否为空
const testCode = (resCode) => {
    console.log(resCode, "resCode")
    let code = new Promise((resolve, reject) => {
        if (resCode == "" || resCode == undefined || resCode == null || resCode.length == 0) {
            Toast("验证码不能为空");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return code;
};
// 密码验证testPassWord
const testPassWord = (resPassWord) => {
    let password = new Promise((resolve, reject) => {
        const reg = /^(?!D+$)(?![^a-zA-Z]+$)S{6,20}$/;
        if (resPassWord == "") {
            Toast("密码不能为空");
            resolve(false);
        } else if (!reg.test(resPassWord)) {
            Toast("密码是6-20位数字和字母的组合");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return password;
};
// 企业名称验证 中文验证
const testCompanyName = (resName) => {
    // var reg =/^[Α-￥]+$/;
    // var reg = /^[一-龥]{2,4}$/;
    // var nameLength=resName.trim().length;
    let companyname = new Promise((resolve, reject) => {
        if (resName == "") {
            Toast("企业名称不能为空");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return companyname;
};

// 真实姓名认证 中文验证
const testPersonName = (resTrueName) => {
    var reg = /^[一-龥]{2,4}$/;
    let trueName = new Promise((resolve, reject) => {
        if (resTrueName == "") {
            Toast("真实姓名不能为空");
            resolve(false);
        } else if (!reg.test(resTrueName.trim())) {
            Toast("真实姓名必须是中文且字符在2-4个");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return trueName;
};
// 身份证号
const testCard = (resCard) => {
    let card = new Promise((resolve, reject) => {
        let reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/
        if (resCard == "") {
            Toast("身份证号码不能为空");
            resolve(false);
        } else if (!reg.test(resCard)) {
            Toast("身份证号格式错误");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return card;
};

// 计算字符串的字节长度
const fucCheckLength = (text, strTemp) => {
    let companyCard = new Promise((resolve, reject) => {
        let reg = /^[S
s]{0,20}$/
        if (strTemp == "") {
            Toast(text + "不能为空");
            resolve(false);
        } else if (!reg.test(strTemp)) {
            Toast(text + "必须在20个字符以内");
            resolve(false);
        } else if (text == "车辆长度" && strTemp >= 100.00) {
            Toast(text + "只能100以内");
            resolve(false);
        } else if (text == "车辆宽度" && strTemp >= 100.00) {
            Toast(text + "只能100以内");
            resolve(false);
        } else if (text == "车辆高度" && strTemp >= 100.00) {
            Toast(text + "只能100以内");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return companyCard;
};
// 转换成年月日时间格式
const formatDateTime = (date) => {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    return y + '-' + m + '-' + d
};
// 转换完整 年月日-时分秒
const formatCompleteDateTime = (date) => {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;

    var hh = date.getHours();
    hh = hh < 10 ? ('0' + hh) : hh;
    var mm = date.getMinutes();
    mm = mm < 10 ? ('0' + mm) : mm;
    var ss = date.getSeconds();
    ss = ss < 10 ? ('0' + ss) : ss;
    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
};
// 判断是图片类型
function isImage(str) {
    var reg = /.(png|jpg|gif|jpeg|webp)$/;
    return reg.test(str);
}
//只能是数字或者小数
const numberFloat = (text, strTemp) => {
    let numberFloat = new Promise((resolve, reject) => {
        let reg = /^d+(.d{0,2})?$/
        let reg1 = /^[S
s]{0,10}$/
        if (strTemp == "") {
            Toast(text + "不能为空");
            resolve(false);
        } else if (!reg.test(strTemp)) {
            Toast(text + "必须是数字和小数,且只有两位小数");
            resolve(false);
        } else if (!reg1.test(strTemp)) {
            Toast(text + "必须在10个字符以内");
            resolve(false);
        } else {
            resolve(true);
        }
    });
    return numberFloat;
}
// 封装为空
function isEmpty(value) {
    if (value == null || value == "" || value == "undefined" || value == undefined || value == "null" || value.length == 0) {
        return true;
    } else {
        return false;
    }
}
//判断是否是微信浏览器的函数
const isWeiXin = ()=>{
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    var ua = window.navigator.userAgent.toLowerCase();
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
    } else{
      return false;
    }
}

//判断是否是安卓还是ios
const isAndroid_ios = () => {
    // const u = navigator.userAgent;
    // const isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
    // if (isiOS) {
    //     return "ios";
    // } else {
    //     return "andriod";
    // }
    // new
    var a = navigator.userAgent;
    var isAndroid = a.indexOf('Android') > -1 || a.indexOf('Adr') > -1; //android终端
    var isiOS = !!a.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
        return 'andriod';
    } else if(isiOS){
        return "ios";
    }
}

// 封装循环重置值
const resertShipList = (array) => {
    let arr = array.map(item => {
        return {
            text: item.text,
            time: '',
            isFinish: item.isFinish,
            code: item.code
        }
    })
    return arr;
};
const beautify_time = (timestamp) => {
    var mistiming = Math.round(new Date() / 1000) - timestamp;
    var postfix = mistiming > 0 ? '前' : '后'
    mistiming = Math.abs(mistiming)
    var arrr = ['年', '个月', '星期', '天', '小时', '分钟', '秒'];
    var arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1];

    for (var i = 0; i < 7; i++) {
        var inm = Math.floor(mistiming / arrn[i])
        if (inm != 0) {
            return inm + arrr[i] + postfix
        }
    }
}


// 相差的天数
const distanceDay = (futureTime) =>{
    let futureDate = new Date(futureTime);
    let nowDate = new Date();
    let date = (futureDate.getTime() - nowDate.getTime()) / (24 * 60 * 60 * 1000);
    return parseInt(date+1); // 打印得到的相差天数
}
//导出
export {
    testPhone,
......
    isWeiXin,
    distanceDay
}

重要的一步不能忽略

main.js引入：

// 引入utils的方法
import * as utils from './utils/util'
Vue.prototype.$utils = utils;

页面中调用：验证手机号

<van-cell-group class="formItem mt20" :border="false">
        <van-field
          v-model="compamyPhone"
          placeholder="请输入授权人电话号码"
          @blur="BlurCompanyPhone" 
          @focus="FocusCompanyPhone"
          clearable
          class="bg" 
          :class="{'active-border':showCompanyPhone}"
        />
      </van-cell-group>

// 电话号码
    BlurCompanyPhone(){
      this.$utils.testPhone(this.compamyPhone);
    },