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 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
JS写滑稽笑脸运动效果
May 28 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 str_replace的替换漏洞
2008/03/15 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
微信小程序如何使用云开发
2019/05/17 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
浅析python协程相关概念
2018/01/20 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
python中wx模块的具体使用方法
2020/05/15 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
房地产推广策划方案
2014/05/19 职场文书
行政上诉状范文
2015/05/23 职场文书
党员转正大会主持词
2015/07/02 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书