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 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
Vue.js 表单控件操作小结
Mar 29 Javascript
vue实现分页组件
Jun 16 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
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实例分享之mysql数据备份
2014/05/19 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
医生实习工作总结的自我评价
2013/09/27 职场文书
模具专业推荐信
2013/10/30 职场文书
基层党员对照检查材料
2014/08/25 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
行政前台岗位职责
2015/04/16 职场文书
销售合作意向书范本
2015/05/08 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python