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 文件本身编码转换 图文教程
Oct 12 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 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
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
脚本收藏iframe
2006/07/21 Javascript
jquery对表单操作2
2011/04/06 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
jQuery知识点整理
2015/01/30 Javascript
浅谈js原生拖放
2016/11/21 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
班组长工作职责
2013/12/25 职场文书
服务员岗位职责
2014/01/29 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
九一八事变演讲稿
2014/09/05 职场文书
小学教育见习报告
2014/10/31 职场文书
杨善洲电影观后感
2015/06/04 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
Redis入门基础常用操作命令整理
2022/06/01 Redis