js 输入框 正则表达式(菜鸟必看教程)


Posted in Javascript onFebruary 19, 2017

源码如下所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		用户名:<input type="text"name = "user" id="user"/>
			 <span id="userSpan" style="font-size: 16pt;"></span>
		<br />
		密码:<input type="text"name = "pwd" id="pwd"/>
			<span id="pwdSpan" style="font-size: 16pt;"></span>
		<br />
		确认密码:<input type="text"name = "pwd2" id="pwd2"/>
		<span id="pwd2Span" style="font-size: 16pt;"></span>
		<br />
		邮箱:<input type="text"name = "email" id="email"/>
		<span id="emailSpan" style="font-size: 16pt;"></span>
		<br />
		手机号:<input type="text"name = "phone" id="phone"/>
		<span id="phoneSpan" style="font-size: 16pt;"></span>
		<br />
		身份证号:<input type="text"name = "status" id="status"/>
		<span id="statusSpan" style="font-size: 16pt;"></span>
		<br />
		地址:<input type="text"name = "address" id="address"/>
		<span id="addressSpan" style="font-size: 16pt;"></span>
		<br />
		<input type="button" value="校验" onclick="verify()" />
		<script type="text/javascript">
			function verify() {
				
				//用户名验证
				var user = "";
				user = document.getElementById("user").value;
				var pattl = /^[A-Z][a-zA-Z0-9_]{6,20}$/;
				var result = pattl.test(user.trim());
				if (result) {
					document.getElementById("userSpan").innerHTML = "√"
					document.getElementById("userSpan").style.fontSize = "20pt"
				} else {
					document.getElementById("userSpan").innerHTML = "×"
				}
				//密码验证
				var pwd = "";
				pwd = document.getElementById("pwd").value;
				var pattl = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
				var result = pattl.test(pwd.trim());
				if (result) {
					document.getElementById("pwdSpan").innerHTML = "√"
					document.getElementById("pwdSpan").style.fontSize = "20pt"
				} else {
					document.getElementById("pwdSpan").innerHTML = "×"
				}
				
				//确认密码验证
				var pwds = "";
				pwds = document.getElementById("pwd2").value;
				var pattl = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
				var result = pattl.test(pwds.trim());
				if (result) {
					document.getElementById("pwd2Span").innerHTML = "√"
					document.getElementById("pwd2Span").style.fontSize = "20pt"
				} else {
					document.getElementById("pwd2Span").innerHTML = "×"
				}
					
				
				//邮箱验证
				var emails = "";
				emails = document.getElementById("email").value;
				var pattl = /^[A-z0-9]+@[a-z0-9]+.com$/;
				var result = pattl.test(emails.trim());
				if (result) {
					document.getElementById("emailSpan").innerHTML = "√"
					document.getElementById("emailSpan").style.fontSize = "20pt"
				} else {
					document.getElementById("emailSpan").innerHTML = "×"
				}
 
				//手机号验证
				var phones = "";
				phones = document.getElementById("phone").value;
				var pattl = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
				var result = pattl.test(phones.trim());
				if (result) {
					document.getElementById("phoneSpan").innerHTML = "√"
					document.getElementById("phoneSpan").style.fontSize = "20pt"
				} else {
					document.getElementById("phoneSpan").innerHTML = "×"
				}
				
				//身份证号验证
				var status1 = "";
				status1 = document.getElementById("status").value;
				var pattl = /^([1-9]){1}[0-9]{17}|[1-9]{1}[0-9]{16}(x|X)?$/;
				var result = pattl.test(status1.trim());
				if (result) {
					document.getElementById("statusSpan").innerHTML = "√"
					document.getElementById("statusSpan").style.fontSize = "20pt"
				} else {
					document.getElementById("statusSpan").innerHTML = "×"
				}
				//地址验证
				var addres = "";
				addres = document.getElementById("address").value;
				var pattl = /^[\u4e00-\u9fa5]+[\u4E00-\u9FA5A-Za-z0-9_]+$/;
				var result = pattl.test(addres.trim());
				if (result) {
					document.getElementById("addressSpan").innerHTML = "√"
					document.getElementById("addressSpan").style.fontSize = "20pt"
				} else {
					document.getElementById("addressSpan").innerHTML = "×"
				}
				
			}
 
 
		</script>
	</body>
</html>

效果图如下:

js 输入框 正则表达式(菜鸟必看教程)

以上这篇js输入框使用正则表达式校验输入内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希

望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 #Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 #Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 #Javascript
jQuery实现一个简单的轮播图
Feb 19 #Javascript
js 博客内容进度插件详解
Feb 19 #Javascript
ajax接收后台数据在html页面显示
Feb 19 #Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 #Javascript
You might like
生成卡号php代码
2008/04/09 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP常用的三种设计模式
2017/02/17 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
javascript学习之json入门
2016/12/22 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
pygame实现五子棋游戏
2019/10/29 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python内置类型性能分析过程实例
2020/01/29 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
介绍一下游标
2012/01/10 面试题
师范应届生教师求职信
2013/11/05 职场文书
自我评价范文分享
2014/01/04 职场文书
迟到检讨书900字
2014/01/14 职场文书
医院信息公开实施方案
2014/05/09 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
司机个人年终总结
2015/03/03 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
公司行政管理制度范本
2015/08/05 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers