AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

30个前端开发中常用的JavaScript函数（一）

2023-08-14 101
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 30个前端开发中常用的JavaScript函数

前言


在前端开发中通常会用到校验函数，检验是否为空、手机号格式、身份证格式等等。现按照用途分类整理出了30个常用的方法，在Vue中也可以使用，方法逻辑都是一样的。可以很大的提高开发效率。同时初学者也可以拿它用来学习JS的使用。

一.JS常用校验函数


1.1.检验是否为空（NULL/空串）


function checkNull(str){  
    if(str == null || str == ""){  
        return false;  
    }  
    return true;  
}


1.2校验是否为纯数字


function checkNum(num){
   if(isNaN(num)){  
        return false;  
    }  
    return true; 
}


1.3校验是否为纯数字（正则）


function checkNum(num){  
     var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 （判断正整数 /^[1-9]+[0-9]*]*$/）  
     if (!re.test(num)){  
        return false;  
     }  
    return true;  
}


1.4.校验手机号


function checkPhone(phone){  
  //验证规则,第一位是【1】开头，第二位有【3,4,5,7,8】，第三位及以后可以是【0-9】  
    var reg = /^1[3|4|5|7|8][0-9]{9}$/; 
    if(!reg.test(phone)){  
        return false;  
    }  
    return true;  
}


1.5.校验座机号


function checkTel(tel) {  
    var reg = /^(\d3,4|\d{3,4}-)?\d{7,8}$/;  
    if (!reg.test(tel)) {  
        return false;  
    }  
    return true;  
}


1.6.校验IP


var checkIp = function(ip){    
    var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;    
    if (reSpaceCheck.test(ip)){    
        ip.match(reSpaceCheck);    
        if (RegExp.$1 <= 255 && RegExp.$1 >= 0 && RegExp.$2 <= 255 && RegExp.$2 >=0    
          &&RegExp.$3 <= 255 && RegExp.$3 >= 0 && RegExp.$4 <= 255 && RegExp.$4>=0){    
            return true;     
        }else{    
            return false;    
        }    
    }else{    
        return false;    
    }    
}


1.7.校验URL地址


function checkUrl(url) {  
    var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;  
    if (!reg.test(url)) {  
        return false;  
    }  
    return true;  
} 
// 是否为网址
function IsURL(strUrl) {
    var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i;
    if (regular.test(strUrl)) {
        return true;
    }
    else {
        return false;
    }
}


1.8.校验身份证


function checkIdCard(idCard) {  
    var aCity={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:"国外"}  
    var iSum = 0;  
    var info = "";  
    if (!/^\d{17}(\d|x)$/i.test(idCard)){  
        return false;//身份证长度或格式错误  
    }  
    idCard = idCard.replace(/x$/i, "a");  
    if (aCity[parseInt(idCard.substr(0, 2))] == null){  
        return false;//身份证地区非法;  
    }  
    var sBirthday = idCard.substr(6, 4) + "-" + Number(idCard.substr(10, 2)) + "-" + Number(idCard.substr(12, 2));  
    var d = new Date(sBirthday.replace(/-/g, "/"));  
    if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())){  
        return false;//身份证上的出生日期非法;  
    }  
    for (var i = 17; i >= 0; i--){  
        iSum += (Math.pow(2, i) % 11) * parseInt(idCard.charAt(17 - i), 11);  
    }  
    if (iSum % 11 != 1){  
        return false;//身份证号非法;   
    }  
    return true;  
}


1.9.校验日期


/* 
 * 检验日期 
 * 格式为YYYY-MM-DD 
 */  
function checkDate(date) {  
    var result = date.match(/((^((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)$))/);  
    if (result == null) {  
        return false;  
    }  
    return true;  
}


1.10.校验邮箱


function checkEmail(email){  
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;   
    if(!reg.test(email)){  
        return false;  
    }  
    return true;  
}


1.11.校验金额


function checkMoney(money) {  
    if (money == '') {  
        return false;  
    }  
    money = money.replace(/(^\s*)|(\s*$)/g, "");  
    var reg = /^[0-9]*\.?[0-9]{0,2}$/;  
    if (!checkNum(money)) {  
        return false;  
    }  
    if (money.length > 3) {  
        if (money.substr(0, 1) == "0") {  
            if (money.substr(3, money.length).length > 2) {  
                return false;  
            }  
        }  
    }  
    if(!reg.test(money)){  
        return false;  
    }  
    return true;  
}


1.12.校验是否为汉字


function checkChar(charValue) {  
    var reg = /^[\u4e00-\u9fa5]{0,}$/;  
    if(!reg.test(charValue)){  
        return false;  
    }  
    return true;  
}


1.13.检测密码强度


function checkPwd(str) {
 var nowLv = 0;
 if (str.length < 6) {
 return nowLv
 }
 ;
 if (/[0-9]/.test(str)) {
 nowLv++
 }
 ;
 if (/[a-z]/.test(str)) {
 nowLv++
 }
 ;
 if (/[A-Z]/.test(str)) {
 nowLv++
 }
 ;
 if (/[\.|-|_]/.test(str)) {
 nowLv++
 }
 ;
 return nowLv;
}
checkPwd('123') // 0
checkPwd('123ASHD') // 2
checkPwd('12asdASAD') // 3
checkPwd('123ASHD)(&!a_') // 4


1.14.校验url链接是否有效


function getUrlState(URL) {
    var suc = false;
    var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
    xmlhttp.Open("GET", URL, false);
    try {
        xmlhttp.Send();
    } catch (e) {
    } finally {
        var result = xmlhttp.responseText;
        if (result) {
            if (xmlhttp.Status == 200) {
                suc = true;
            } else {
                suc = false;
            }
        } else {
            suc = false;
        }
    }
    return suc;
}


文章标签：
前端开发
JavaScript
数据安全/隐私保护
关键词：
前端javascript
JavaScript函数
JavaScript前端开发
前端函数
前端JavaScript函数
DaenCode
目录
相关文章
2G冲浪词条
|
22天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
2G冲浪词条
31 3
springboot解决js前端跨域问题，javascript跨域问题解决
进步`于辰
|
1月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
进步`于辰
42 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
龙大吉
|
25天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
38 5
土木林森
|
23天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
土木林森
57 1
左诗右码
|
27天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
33 4
小王老师呀
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤，包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆，以及在 HTML 文件中引用混淆后的文件。通过这些步骤，可以有效提高代码的安全性。
小王老师呀
55 2
土木林森
|
1月前
|
设计模式 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用JavaScript，打造智能交互体验！
【10月更文挑战第30天】前端开发领域充满了无限可能与创意，JavaScript作为核心语言，凭借强大的功能和灵活性，成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果，展示了JavaScript的多样性和强大能力。
土木林森
51 4
大树营养快线
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
34 2
源码星辰
|
2月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript（简称JS）是一种广泛使用的脚本语言，特别在前端开发领域，它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用（SPA），JavaScript都扮演着不可或缺的角色。
源码星辰
26 3
游客44yag4ft7nckq
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块，可在调用时执行特定任务。函数可以无参或带参，参数用于传递值并在函数内部使用。函数调用可在事件触发时进行，如用户点击按钮。JavaScript 对大小写敏感，函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
游客44yag4ft7nckq
25 1

热门文章

最新文章

  • 1
    Node.js 中流操作实践
  • 2
    《JavaScript框架设计》——1.4　类型的判定
  • 3
    JavaScript FAQ（六）——字符串
  • 4
    .ts 文件编译成 .js 文件，以及 VSCode 自动编译配置
  • 5
    JavaScript右下角信息提示插件Notyf
  • 6
    【温故而知新-Javascript】使用Web存储
  • 7
    测试驱动javascript开发 -- 3.测试驱动开发过程（上）
  • 8
    第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
  • 9
    是时候开始使用JavaScript严格模式了
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    86
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    82
  • 3
    使用Vue.js构建交互式前端的技术探索
    87
  • 4
    如何优化前端性能：关键步骤和技巧
    85
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    96
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    115
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    258
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    69
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    84
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    134

    • 相关课程

    更多
  • 移动Web前端开发
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。