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实现仿Windows关机效果
Mar 10 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
vue接口请求加密实例
Aug 11 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
德劲1103的维修打理经验
2021/03/02 无线电
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
javascript定时器完整实例
2015/02/10 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
浅析Ajax语法
2016/12/05 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Vue组件通信的四种方式汇总
2018/02/08 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
python 域名分析工具实现代码
2009/07/15 Python
浅析python中的分片与截断序列
2016/08/09 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python web框架中实现原生分页
2019/09/08 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python输出指定字符串的方法
2020/02/06 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
情人节活动策划方案
2014/02/27 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
民事纠纷协议书
2016/03/23 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP