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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
javascript动态创建链接的方法
May 13 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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 各种应用乱码问题的解决方法
2010/05/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
Highcharts入门之简介
2016/08/02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
python 性能提升的几种方法
2016/07/15 Python
python脚本实现验证码识别
2018/06/07 Python
python绘制彩虹图
2019/12/16 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
学校门卫工作职责
2013/12/07 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
学党史心得体会
2014/09/05 职场文书
关于开学的感想
2015/08/10 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书