JS使用正则表达式提交页面验证的代码


Posted in Javascript onOctober 16, 2019

如何用正则表达式提交验证

首先,我们先用一首歌活跃一下气氛!

门前大桥下

游过一群鸭

快来快来数一数

二四六七八

嘎嘎嘎嘎

真呀真多呀…

stop,我们来进入正题↓

1:让你们看一下我么老师布置的作业

JS使用正则表达式提交页面验证的代码

2:需要呈现的效果是:看图片

JS使用正则表达式提交页面验证的代码

3:那么,下面需要的就是代码

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		用户名:
		<input type="text" name="Name" id="Name" /><br/> 
		密码:
		<input type="text" name="pwd" id="pwd" /><br/>
		 确认密码:
		<input type="text" name="disPwd" id="disPwd" /><br/> 
		邮箱:
		<input type="text" name="email" id="email" /><br/> 
		手机号:
		<input type="text" name="phone" id="phone" /><br/> 
		身份证号:
		<input type="text" name="ID" id="ID" /><br/>
		 地址:
		<input type="text" name="address" id="address" /><br/>
		<input type="button" value="验证" onclick="verification()" />

		<script type="text/javascript">
			function verification() {

				var Name= document.getElementById("Name").value;
				var pwd = document.getElementById("pwd").value;
				var disPwd = document.getElementById("disPwd").value;
				var email = document.getElementById("email").value;
				var phone = document.getElementById("phone").value;
				var idNumber = document.getElementById("ID").value;
				var address = document.getElementById("address").value;

				var NameRule = /^[A-Z][A-z0-9_]{5,19}$/;
				var pwdRule = /^[a-zA-Z]\w{7,14}$/;
				var disPwdRule = /^[a-zA-Z]\w{7,14}$/;
				var emailRule = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				var phoneRule = /^(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 idNumberRule = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				var addressRule = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;

				if(NameRule.test(user.trim())) {
					if(pwdRule.test(pwd.trim())) {
						if(disPwdRule.test(disPwd.trim())) {
							if(emailRule.test(email.trim())) {
								if(phoneRule.test(phone.trim())) {
									if(idNumberRule.test(idNumber.trim())) {
										if(addressRule.test(address.trim())) {
											alert("验证成功");
										} else {
											alert("地址不合法");
										}
									} else {
										alert("身份证号不合法");
									}
								} else {
									alert("手机号不合法");
								}
							} else {
								alert("邮箱不合法");
							}
						} else {
							alert("确认密码不合法");
						}
					} else {
						alert("密码不合法");
					}
				} else {
					alert("用名不合法");
				}
			}
		</script>

	</body>

</html>

提示:老师说这种代码后期不太好管理,还有更好的办法, 我主要是觉得这种对于我来说更好理解,所以我也没去学习另一种,仅供参考哈。

4:效果图来啦,嘿嘿

JS使用正则表达式提交页面验证的代码JS使用正则表达式提交页面验证的代码

我用的是alert这个方法,网页提示。

总结

以上所述是小编给大家介绍的JS使用正则表达式提交页面验证的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
Javascript 布尔型分析
Dec 22 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
js实现微信聊天界面
Aug 09 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 #Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 #Javascript
JS回调函数深入理解
Oct 16 #Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 #Javascript
js实现图片跟随鼠标移动效果
Oct 16 #Javascript
vue实现鼠标经过动画
Oct 16 #Javascript
javascript实现动态时钟的启动和停止
Jul 29 #Javascript
You might like
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python引用计数操作示例
2018/08/23 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python实现人机五子棋
2020/03/25 Python
python 装饰器的使用示例
2020/10/10 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
超市总经理岗位职责
2014/02/02 职场文书
教师产假请假条范文
2014/04/10 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
演讲比赛主持词
2015/06/29 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android