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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
网站当前的在线人数
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/11/17 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python实现dict版图遍历示例
2014/02/19 Python
python机器学习之神经网络(一)
2017/12/20 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
python列表返回重复数据的下标
2020/02/10 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python实现视频压缩功能
2020/12/18 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
英文自荐信常用句子
2014/03/26 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python