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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
vue构建单页面应用实战
Apr 10 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
jquery text()要注意啦
2009/10/30 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python 函数返回值的示例代码
2019/03/11 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
行政总监岗位职责
2013/12/05 职场文书
公司活动总结怎么写
2014/06/25 职场文书
个人租房协议书范本
2014/09/30 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
作弊检讨书
2015/01/27 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers