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实现面向对象类的功能书写技巧
Mar 07 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js倒计时小程序
Nov 05 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 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 参数过滤、数据过滤详解
2015/10/26 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
python中turtle库的简单使用教程
2020/11/11 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
渔夫的故事教学反思
2014/02/14 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书