/判断输入内容是否为空 function IsNull(){ var str = document.getElementById('str').value.trim(); if(str.length==0){ alert('对不起,文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称! } } //判断日期类型是否为YYYY-MM-DD格式的类型 function IsDate(){ var str = document.getElementById('str').value.trim(); if(str.length!=0){ var reg = /^(d{1,4})(-|/)(d{1,2})2(d{1,2})$/; var r = str.match(reg); if(r==null) alert('对不起,您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称! } } //判断日期类型是否为YYYY-MM-DD hh:mm:ss格式的类型 function IsDateTime(){ var str = document.getElementById('str').value.trim(); if(str.length!=0){ var reg = /^(d{1,4})(-|/)(d{1,2})2(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/; var r = str.match(reg); if(r==null) alert('对不起,您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称! } } //判断日期类型是否为hh:mm:ss格式的类型 function IsTime() { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^((20|21|22|23|[0-1]d):[0-5][0-9])(:[0-5][0-9])?$/ if(!reg.test(str)){ alert("对不起,您输入的日期格式不正确!");//请将“日期”改成你需要验证的属性名称! } } } //判断输入的字符是否为英文字母 function IsLetter() { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^[a-zA-Z]+$/; if(!reg.test(str)){ alert("对不起,您输入的英文字母类型格式不正确!");//请将“英文字母类型”改成你需要验证的属性名称! } } } //判断输入的字符是否为整数 function IsInteger() { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^[-+]?d*$/; if(!reg.test(str)){ alert("对不起,您输入的整数类型格式不正确!");//请将“整数类型”要换成你要验证的那个属性名称! } } } //判断输入的字符是否为双精度 function IsDouble(val) { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^[-+]?d+(.d+)?$/; if(!reg.test(str)){ alert("对不起,您输入的双精度类型格式不正确!");//请将“双精度类型”要换成你要验证的那个属性名称! } } } //判断输入的字符是否为:a-z,A-Z,0-9 function IsString() { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^[a-zA-Z0-9_]+$/; if(!reg.test(str)){ alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称! } } } //判断输入的字符是否为中文 function IsChinese() { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^[u0391-uFFE5]+$/; if(!reg.test(str)){ alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称! } } } //判断输入的EMAIL格式是否正确 function IsEmail() { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/; if(!reg.test(str)){ alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称! } } } //判断输入的邮编(只能为六位)是否正确 function IsZIP() { var str = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^d{6}$/; if(!reg.test(str)){ alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称! } } } //判断输入的数字不大于某个特定的数字 function MaxValue() { var val = document.getElementById('str').value.trim(); if(str.length!=0){ reg=/^[-+]?d*$/; if(!reg.test(str)){//判断是否为数字类型 if(val>parseInt('123')) //“123”为自己设定的最大值 { alert('对不起,您输入的数字超出范围');//请将“数字”改成你要验证的那个属性名称! } } } } Phone : /^(((d{2,3}))|(d{3}-))?((0d{2,3})|0d{2,3}-)?[1-9]d{6,7}(-d{1,4})?$/ Mobile : /^(((d{2,3}))|(d{3}-))?13d{9}$/ Url : /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/ IdCard : /^d{15}(d{2}[A-Za-z0-9])?$/ QQ : /^[1-9]d{4,8}$/ 某种特殊金额:/^((d{1,3}(,d{3})*)|(d+))(.d{2})?$/ //说明:除“XXX XX,XXX XX,XXX.00”格式外 //为上面提供各个JS验证方法提供.trim()属性 String.prototype.trim=function(){ return this.replace(/(^s*)|(s*$)/g, ""); } 调用: <input type="text" name="str" > <input type="button" value=" 确定 " onClick=""> //onClick中写自己要调用的JS验证函数 <script language="JavaScript" type="text/javascript"> var patterms = new Object(); //验证IP patterms.ip = /^(d{1,2}|1dd|2[0-4]d|25[0-5])(.(d{1,2}|1dd|2[0-4]d|25[0-5])){3}$/; //验证EMAIL patterms.email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/; //验证日期格式2009-07-13 patterms.date = /^d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]d|3[0-1])$/; //验证时间格式16:55:39 patterms.time = new RegExp("^([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d$"); //验证函数 function verify(str,pat) { var thePat; thePat = patterms[pat]; if(thePat.test(str)) { return true; } else { return false; } } //测试 alert(verify("asidycom@163.com","email")+","+verify("192.168.1.1","ip")+ ","+verify("16:55:39","time")+","+verify("2009-07-13","date")+","+verify("192.168","ip")); 验证数字:^[0-9]*$ 验证n位的数字:^d{n}$ 验证至少n位数字:^d{n,}$ 验证m-n位的数字:^d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^+?[1-9][0-9]*$ 验证非零的负整数:^-[1-9][0-9]*$ 验证非负整数(正整数 + 0) ^d+$ 验证非正整数(负整数 + 0) ^((-d+)|(0+))$ 验证长度为3的字符:^.{3}$ 验证由26个英文字母组成的字符串:^[A-Za-z]+$ 验证由26个大写英文字母组成的字符串:^[A-Z]+$ 验证由26个小写英文字母组成的字符串:^[a-z]+$ 验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$ 验证由数字、26个英文字母或者下划线组成的字符串:^w+$ 验证用户名或昵称经常用到: ^[u4e00-u9fa5A-Za-z0-9-_]*$ 只能中英文,数字,下划线,减号 验证用户密码:^[a-zA-Z]w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。 验证是否含有 ^%&',;=?$" 等字符:[^%&',;=?$x22]+ 验证汉字:^[u4e00-u9fa5],{0,}$ 验证Email地址:^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$ 验证InternetURL:^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$ 验证电话号码:^((d{3,4})|d{3,4}-)?d{7,8}$:--正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。 验证身份证号(15位或18位数字):^d{15}|d{}18$ 验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12” 验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。 整数:^-?d+$ 非负浮点数(正浮点数 + 0):^d+(.d+)?$ 正浮点数 ^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$ 非正浮点数(负浮点数 + 0) ^((-d+(.d+)?)|(0+(.0+)?))$ 负浮点数 ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$ 浮点数 ^(-?d+)(.d+)?$ 由于手机号段的不断更新,以前的正则表达式已经无法满足需求。重新编写这条表达式,号段资料来源依据:http://www.von-line.com/hao.htm 1 2 3 var regex = { mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/ } 表达式分析: “/”代表一个正则表达式。 “^”代表字符串的开始位置,“$”代表字符串的结束位置。 “?”代表匹配前面的字符一个或零个,所以这里0?的意思是手机号码可以以0开头或不以0开头。 接下的部分验证11位的手机号码,先从13开始,因为从130-139都有所以可选区间是[0-9],15开头的号码没有154所以[]里面没有4这个数字,当然也可以写成[0-35-9], 下面18和14开的号码同上。 小括号括起来的代表一个子表达式,里面是4个可选分支分别用“|”来区分开来,在正则中“|”的优先级是最低的,这里每个分支匹配的都是3个字符(一个[]只能匹配一个字符, 里面是可选的意思),也就是手机号码的前3位数字,那么后面还有8位数字需要匹配,可以是0-9的任意字符,所以是“[0-9]{8}”,{}中的数字代表匹配前面字符的个数。分析完毕。
js正则表达式验证大全
react组件中debounce防抖功能失效问题解决办法
目录一、问题背景二、解决办法三、拓展一、问题背景import { debounce } from 'lodash'; const [searchKey, setSearchKey] = useState('');// 防抖函数 const debounceLi
在 React 项目中 Editable Table 的实现
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:佳岚可编辑表格在数栈产品中是一种
神奇的JavaScript弱等价类型转换
JavaScript语言特性 - 类型转换JavaScript这门语言的类型系统从来没有它表面看起来的那样和善,虽然比起Java、C#等一众强类型语言,它的弱类型使用起来似乎是如此便利,但正因为
vue+element-ui表格自定义列模版的实现
目录前言一、为什么要自定义表列模版?二、实现步骤1.封装表格组件2.父组件引用总结前言日前vue3项目中用element-ui表格封装一个组件,有自定义表列格式的需求,做完后顺手总结一
webpack打包后index.html引用文件地址问题小结
在前端开发中,src 属性指定的相对路径是相对于当前 HTML 文件的路径,而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。当浏览器解析 HTML 文件中的 <script
vue跳转时根据url锚点(#xxx)实现页面内容定位的方法
目录介绍一、实现原理二、代码(vue3 setup)三、演示:四、结束介绍本前端仔在做页面跳转的时候,被要求跳转到页面时候,把对应部分的内容自动滚动到顶部~我一开始想到的就是根据
基于vue3+TypeScript实现一个简易的Calendar组件
目录功能分析功能实现初始化组件分析具体操作Calendar / CalendarCom.vueCalendar / CalendarMonth.vueCalendar / HeaderCom.vue小结总结功能分析目前学到功能有以下几点日
vue3项目打包成apk(android)详细图文教程
目录一、打包vue3项目1、打包2、解决打包后的文件的白屏问题。二、打包成apk1、创建“5+App”项目2、打包文件移动3、生成apk文件三、生成apk附:vue项目打包时报错
vue路由懒加载工作原理
Vue路由懒加载是一种优化技术,旨在减少应用程序的初始加载时间并提高性能。具体来说,它允许我们在用户实际需要访问某个路由时,才加载对应的组件代码,而不是在应用程序启动时一
vue2项目使用exceljs多表头导出功能详解
目录前言一、插件安装二、数据准备三、插件引入四、导出前数据处理1、按exceljs格式创建导出函数2、表头及列宽数据预处理2.1 处理逻辑3、单元格样式处理函数4、表头数据填
使用JavaScript截取视频特定帧的实现方法
目录背景1. 监听文件选择2. 捕获视频帧3. 绘制视频帧4. 实现效果结论背景在网页开发中,我们经常需要对媒体文件进行处理,其中包括视频文件。有时候,我们可能需要从视频中提取特
Node+Express连接MySQL实现增删改查功能
一、在项目中安装mysql 和 expresscnpm install mysql express --save二、示例代码const express = require("express"); const app = express(); const mysql = require("m
前端报错npm ERR! cb() never called!问题解决办法
目录1.问题描述1.1使用npm install后报错2.解决问题过程2.1看网上大部分的解决方式是:2.2网上还有部分的解决方式是:2.2.1如果你不幸的按照网上使用npm uninstall -g npm升级
js跨域的几种解决方案
目录一、什么是跨域?二、跨域解决方案方案一:jsonp (json with padding)方案二:CORS (CROSS-Origin Resource Sharing 跨域资源共享)和跨域CORS有关的几个请求头和响应头请求头
Vue图片懒加载之Vue-Lazyload的使用
目录一、什么叫懒加载二、懒加载的优点三、为什么使用懒加载懒加载原理是什么四、vue中如何实现懒加载五、js---懒加载的实现步骤?懒加载代码实现方式一:原生js方式二: getB
解决JavaScript精度问题的常见方法
目录引言解决方案一、使用整数进行计算二、使用库函数三、四舍五入优缺点分析1、整数计算方法2、使用库函数方法3、四舍五入方法结论引言在 JavaScript 中,处理浮点数时经常
使用JS代码实现页面添加水印的方法详解
目录一、水印概括1. 添加水印的好处2. 添加水印的坏处二、技术方案1. watermark 第三方库2. JS 简单实现水印功能三、水印功能实现1. 水印功能需求2. 功能实现3. 步骤解析3.
微信小程序中实现自定义Navbar方法详解
目录前言StatusBar高度TitleBar高度编写Navbar组件使用最终效果前言自定义 navbar 应该是很常见的需求。要自定义一个 navbar 并不难,只需要了解其组成部分即可。从上面的图
axios对外出口API的设计方法
目录axios 的 2 种使用方式请求方法别名Axios 类Axios.prototype.request()axios.defaults/interceptors请求方法别名导出 axios如果直接导出 Axios总结本文我们将讨论 axio
js实现WebSocket 连接的示例代码
目录一.WebSocket 简单介绍1.HTTP和WebSocket的区别2.WebSocket应用场景二.js使用WebSocket1.创建WebSocket实例2.属性3.方法4.事件5.使用示例一.WebSocket 简单介绍1.HTTP
保姆级Decimal.js使用教程(解决js精度问题)
目录精度问题控制台图样01.引入Decimal.js02.使用加减乘除全上附:Vue项目完整例子总结 精度问题控制台图样如果银行的业务你这样做,不知道要损失多少钱,这样是不行的,计算的不准
使用Vue3实现在浏览器端进行zip文件压缩
在前端开发中,我们时常需要处理文件上传和下载的功能。有时,用户可能希望将多个文件打包成一个zip文件以便于下载。我这里分享一个使用Vue3和JSZip库在浏览器端实现zip文件压
axios拦截器机制的实现原理详解
目录axios 拦截器简介Axios 实例拦截器类拦截器实现原理收集拦截器拼接请求链由请求链结构看错误处理第一个请求拦截器出错最后一个请求拦截器出错axios 请求出错响应拦截器
Python实现图片二值化的详细代码
目录1. 什么是二值化2. 二值化的作用3. 二值化的实现4.代码实现1. 什么是二值化图像二值化就是将图像上的像素点的“灰度值”设置为[0, 0, 0]或[255, 255, 255],即
printJS打印问题汇总以及解决办法
目录一、打印预览表格列不全(Element的el-table组件)1、打印设置“打印缩放”2、修改el——table的底层代码(如果页面上有多个表格慎用) 二、如何解决vue p
vue前端实现login页登陆验证码代码示例
实现效果// template<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container"> <span
vue3中element Plus插槽示例详解
vue3中element Plus插槽,实现代码如下所示: <el-table-column property="" label="操作" width="200" show-overflow-tooltip> <template
如何在JavaScript实现Blob文件流下载
目录一、下载二、请求三、示例总结一、下载在 JavaScript 中,可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。下面是一个示例代码,可以帮助
详解Javascript如何通过async/await优雅地使用FileReader
目录封装成方法Javascript封装成一个classTypeScript封装成一个classTypeScript基于泛型FileReader的使用机会很多,但是它是异步的,因此很容易出现回调地狱。我们可以使用asyn
使用Webstorm调试Vue代码详细图文教程
在我们前端开发过程中相信很多人都是通过console.log来调试我们的代码的,但是当代码复杂度比较高的时候这个方法就比较鸡肋了。这里我来教大家在Webstorm中如何来调试自己的
验证码倒计时60秒的JS代码
<script src="../../public/jquery.js"></script><h4>验证码</h4><div class="regin_yan_bac"> <input type="password"> <button class="sms_click">发送验证码</butto
Apache设置反向代理解决js跨域问题
这是一个很简单的方案,通过启用Apache反向代理解决js跨域问题为什么要这么做?在现在的开发过程中大家会遇到这样一个问题:后端代码写好之后,前端的小伙伴需要将后端代码部署到本
JS操作剪贴板代码详解
javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器。javascript可以使用window.clipboardData对象处理剪贴板内容。保存到剪贴板的方法setData(param1, param
JS判断用户名及密码是否为空的方法
<script type="text/javascript"> // 验证输入不为空的脚本代码 function checkForm(form) { if(form.username.value == "") { alert("用户名不能为空!"); form.usern
简单实现js点击展开二级菜单功能
虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的。我
帝国CMS 7.0后台登录验证码不显示的解决方法
针对帝国CMS7.0,有的同学开启了后台登录验证码,但是由于种种原因后台验证码没有显示,然而不填写验证码又无法登录后台,下面给大家提供一个解决方案:用工具(一定要用工具比如NOTEPA
JS生成当前页面URL二维码
在页面中加入当前页面URL的二维码,方便用户扫码到手机上无缝浏览,JS和HTML代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.
帝国cms:评论列表模板中调用热门文章或是推荐文章的js方法
后台管理评论模板里有评论的列表模板,想在评论列表模板中调用热门文章或是推荐文章,现在考虑到标签和js.长知识:动态模板无法使用标签,所以标签在这里就pass了,专心搞js----》1、
Ubuntu/Debian/CentOS系统安装Node.js软件教程
在这篇文章中,是整理比较全的Ubuntu/Debian/CentOS系统,安装最新版本Node.js的教程,目前最新的版本是10.0,但是一般我们也不要太追求最新,我们可以安装8.0或者9.0差不多。第一、U
正则表达式匹配任意字符(包括换行符)
正则表达式中,“。”(点符号)匹配的是除了换行符“\n”以外的所有字符。但有时候我们需要匹配包括换行符在内的字符,经过一番搜索,发现了几种正则表达式匹配