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高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
js中创建对象的几种方式
Feb 05 Javascript
angularJS开发注意事项
May 26 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
小程序实现密码输入框
Nov 16 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
牡丹941资料
2021/03/01 无线电
laravel 时间格式转时间戳的例子
2019/10/11 PHP
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
python字符类型的一些方法小结
2016/05/16 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python区块及区块链的开发详解
2019/07/03 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
软件工程师面试题
2012/06/25 面试题
5.12护士节演讲稿
2014/04/30 职场文书
会议欢迎标语
2014/06/30 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
党员个人总结自评
2015/02/14 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
导游词之日月潭
2019/11/05 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技