IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 基本正则表达式的运用【前端】 -> 正文阅读

[JavaScript知识库]基本正则表达式的运用【前端】

关于正则表达式一直都是个让很多程序员都觉得很郁闷的一个东西,我觉得创造正则表达式的那个家伙简直就是个奇葩,要不就是外星人。就那么一个字符规则校验就足以使那么多程序员为之抓狂,你可以想象这个东西该有多变态。由于本人水平有限,不可能写的那么全面,只是把比较实用的东西给写下来,还有对一些常用的正则表达式进行收集整理,如果有写的不对的地方,还希望各路大牛多多指教!代码真的很详细,句句有解释

正则表达式简介:

正则表达式是由一些具有特殊含义的字符组成的字符串,多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。
废话不多说,开始进入正题。

下面是没有任何css样式和js文件的正则表达式,很简单,可以直接用,下面是效果图

?代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则验证</title>
		<style type="text/css">
			span{
				color: red;
				font-size: 14px;
			}
		</style>
		<script type="text/javascript">
			function $(sid){
				return document.getElementById(sid);
			}
			
			//做最终的验证
			function myf(){
				var a = vName();
				var b = vPwd();
				if(a==false&&b==false){
					return false;
				}
				return true;
			}
			function vName(){
				var name = $("sname").value;//拿到文本框的值
				var sp = $("sa");//拿到span 
				var reg = /^\w{6,10}$/;//正则模板
				if(!reg.test(name)){//不匹配 shift+end
					sp.innerHTML = "用户名必须是6-10位的合法字符";
					return false;
				}
				else{//匹配上了
					sp.innerHTML = "";
					return true;
				}
			}
			function vPwd(){
				var name = $("spwd").value;//拿到文本框的值
				var sp = $("sb");//拿到span 
				var reg = /^\d{6}$/;//正则模板
				if(!reg.test(name)){//不匹配 shift+end
					sp.innerHTML = "密码必须是6位的数字";
					return false;
				}
				else{//匹配上了
					sp.innerHTML = "";
					return true;
				}
			}
			function vEmail(){//2384jk@sj.com
				var name = $("semail").value;//拿到文本框的值
				var sp = $("sc");//拿到span 
				var reg = /^\w+@\w+\.[a-zA-Z]{2,3}$/;//正则模板
				if(!reg.test(name)){//不匹配 shift+end
					sp.innerHTML = "邮箱格式不正确";
				}
				else{//匹配上了
					sp.innerHTML = "";
				}
			}
			//1-9 10-99 100-149 150
			function vAge(){//1-150
				var name = $("sage").value;//拿到文本框的值
				var sp = $("sd");//拿到span 
				var reg = /^([1-9]|[1-9]\d|1[0-4]\d|150)$/;//正则模板
				if(!reg.test(name)){//不匹配 shift+end
					sp.innerHTML = "年龄必须在1-150之间";
				}
				else{//匹配上了
					sp.innerHTML = "";
				}
			}
			function vZj(){//1-150
				var name = $("szj").value;//拿到文本框的值
				var sp = $("se");//拿到span 
				var reg = /^(\d{3,4}-)?(\d{7,8})(-\d{1,4})?$/;//正则模板
				if(!reg.test(name)){//不匹配 shift+end
					sp.innerHTML = "座机号码格式不正确";
				}
				else{//匹配上了
					sp.innerHTML = "";
				}
			}
			function vPhone(){//1-150
				var name = $("sphone").value;//拿到文本框的值
				var sp = $("sf");//拿到span 
				var reg = /^1[3-9]\d{9}$/;//正则模板
				if(!reg.test(name)){//不匹配 shift+end
					sp.innerHTML = "手机号码格式不正确";
				}
				else{//匹配上了
					sp.innerHTML = "";
				}
			}
			function vSfz(){//1-150
				var name = $("ssfz").value;//拿到文本框的值
				var sp = $("sg");//拿到span 
				var reg = /^(\d{18}|\d{15}|\d{17}X)$/;//正则模板
				if(!reg.test(name)){//不匹配 shift+end
					sp.innerHTML = "身份证格式不正确";
				}
				else{//匹配上了
					sp.innerHTML = "";
				}
			}
		</script>
	</head>
	<body>
		<!-- 
		 用户名必须是6-10位的合法字符
		 密码必须是6位的数字
		 邮箱:@ .
		 年龄:1-150
		 座机:(区号3,4)-(号码(7,8))-(分机号1,4)
		 手机号:1[3-9]9个数字
		 身份证:15位或者18位 17位+X
		 -->
		<form action="1.html" onsubmit="return myf()">
			用户名:<input type="text" id="sname" onblur="vName()"/><span id="sa"></span><br />
			密码:<input type="text" id="spwd" onblur="vPwd()"/><span id="sb"></span><br />
			邮箱:<input type="text" id="semail" onblur="vEmail()"/><span id="sc"></span><br />
			年龄:<input type="text" id="sage" onblur="vAge()"/><span id="sd"></span><br />
			座机:<input type="text" id="szj" onblur="vZj()"/><span id="se"></span><br />
			手机号:<input type="text" id="sphone" onblur="vPhone()" /><span id="sf"></span><br />
			身份证:<input type="text" id="ssfz" onblur="vSfz()" /><span id="sg"></span><br />
			<input type="submit" value="提交" />
			<input type="reset" value="清空" />
		</form>
	</body>
</html>

感谢!

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-24 09:20:29  更:2022-04-24 09:21:30 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:51:04-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码