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 将json字符串转换为json对象的方法解析
Nov 13 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
js实现点击生成随机div
Jan 16 Javascript
vue实现自定义多选按钮
Jul 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
php的一个登录的类 [推荐]
2007/03/16 PHP
php随机显示图片的简单示例
2014/02/15 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
Javascript 二维数组
2009/11/26 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python定向爬取淘宝商品价格
2018/02/27 Python
python爬取个性签名的方法
2018/06/17 Python
Python global全局变量函数详解
2018/09/18 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
公务员总结性个人自我评价
2013/12/05 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
消防安全员岗位职责
2014/03/10 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js