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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
详解express使用vue-router的history踩坑
Jun 05 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中的超全局变量
2006/10/09 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php自定义session示例分享
2014/04/22 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
为什么会有内存对齐
2016/10/10 面试题
大学生推广普通话演讲稿
2014/09/21 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
先进事迹材料范文
2014/12/29 职场文书
五年级下册复习计划
2015/01/19 职场文书
晚会开场白和结束语
2015/05/29 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
Python实现对齐打印 format函数的用法
2022/04/28 Python