正则表达式基础运用

最新推荐文章于 2024-04-17 08:54:39 发布
最新推荐文章于 2024-04-17 08:54:39 发布
阅读量247 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_1978P1/article/details/82663319
版权

验证表单

背景 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>正则表单验证</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.divb{
				/*width: 100%;*/
				height: 100%;
				background: url(images/1503471852340.jpg) no-repeat;
				-webkit-background-size: 100% 100%;
				background-size: 100% 100%;
				margin:20px auto;
				overflow: hidden;
			}
			.divs{
				width: 550px;
				height: 500px;
				border: 1px solid #999999;
				margin: 200px auto;
				background-color: rgba(255,255,255,0.3);
				border-radius: 10px;
			}
			table{
				border-collapse: collapse;
				box-sizing:border-box;
				border: 0px solid rgba(255,255,255,0);
				margin: 0 auto;
			}
			
			.tdd1,.tdd2{
				
				height: 50px;
				padding: 10px 0px;
				
				
			}
			.tdd{
				height: 50px;
				/*margin-bottom: 20px;*/
				text-align: center;
				font:bold 24px "微软雅黑";
				
			}
			.tdd1{
				width: 100px;
				text-align: right;
				font-weight: bold;
			}
			.tdd2{
				width: 450px;
				text-align: center;
			}
			
			input{
				width: 360px;
				height: 35px;
				padding: 5px 10px; 
				font:bold 16px "微软雅黑";
				outline: none;
				border: 1px solid #000;
				background-color: rgba(255,255,255,0.6);
			}
			#button{
				width: 150px;
				height: 50px;
				margin-top: 10px;
				border: 0px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="divb">
			<div class="divs">
				<form action="" method="get">
					<table border="" cellspacing="" cellpadding="">
						<tr class="trr">
							<td class="tdd" colspan="2">用户注册</td>
						</tr>
						<tr class="trr">
							<td class="tdd1">用户名：</td>
							<td class="tdd2"><input id="user" type="text" value="" placeholder="请输入用户名"/></td>
						</tr>
						<tr class="trr">
							<td class="tdd1">密码：</td>
							<td class="tdd2"><input id="psw1" class="psw" type="password" value="" placeholder="请输入密码"/></td>
						</tr> 
						<tr class="trr">
							<td class="tdd1">确认密码：</td>
							<td class="tdd2"><input id="psw2" class="psw" type="password" value="" placeholder="请再次输入密码"/></td>
						</tr>
						<tr class="trr">
							<td class="tdd1">手机号：</td>
							<td class="tdd2"><input type="tel" id="tel" placeholder="请输入手机号"/></td>
						</tr>
						<tr class="trr">
							<td class="tdd1">电子邮件：</td>
							<td class="tdd2"><input type="email" id="email" value="" placeholder="请输入电子邮箱"/></td>
						</tr>
						<tr class="trr">
							<!--<td class="tdd1"></td>-->
							<td class="tdd2" colspan="2"><input type="submit" id="button" value="注       册" /></td>
						</tr>
						<tr class="trr">
							<td class="tdd1"></td>
							<td class="tdd2"></td>
						</tr>
						<tr class="trr">
							<td class="tdd1"></td>
							<td class="tdd2"></td>
						</tr>	
					</table>
					
					
					
				</form>
			</div>
		</div>
		
		
		
		
		
		<script type="text/javascript">
			var formreg = /^[a-zA-Z][a-zA-Z0-9]{5,14}$/g;
			var pswmreg = /^[a-zA-Z][\/\*\.\_]{5,11}$/g;
			var telreg = /^1[356789][0-9]{9}$/g;
			var emailreg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+[\.][a-zA-Z]{2,4}$/g;
			var inp = document.getElementsByTagName("input");

			inp[0].onfocus = function(){
				formreg.lastIndex = 0;
				inp[0].placeholder = "";
			}
		
			inp[0].onblur = function(){
				if(formreg.test(inp[0].value)){
					
					inp[0].style.outline = "1px solid #3f97ff";
				}else if(inp[0].value == ""){
					inp[0].placeholder = "请输入用户名";
					inp[0].style.outline = "1px solid #f00";
				}else{
					inp[0].style.outline = "1px solid #f00";
				}
			}
			inp[1].onfocus = function(){
				pswmreg.lastIndex = 0;
				inp[1].placeholder = "";
				
			}
			inp[1].onblur = function(){
				if(pswmreg.test(inp[1].value)){
					
					inp[1].style.border = "1px solid #3f97ff";
				}else if(inp[1].value == ""){
					inp[1].placeholder = "请输密码";
					inp[1].style.border = "1px solid #f00";
				}else{
					inp[1].placeholder = "请输密码";
					inp[1].style.border = "1px solid #f00";
				}
			}
			inp[2].onfocus = function(){
				pswmreg.lastIndex = 0;
				inp[2].placeholder = "";
				
			}
			inp[2].onblur = function(){
				if(inp[2].value == inp[1].value && inp[2].value != ""){
					inp[2].style.border = "1px solid #3f97ff";
				}else if(inp[2].value == ""){
					inp[2].placeholder = "请再次输入密码";
					inp[2].style.border = "1px solid #f00";
				}else{
					inp[2].style.border = "1px solid #f00";
					alert("两次密码输入不一致");
				}
			}
			
			inp[3].onfocus = function(){
				telreg.lastIndex = 0;
				inp[3].placeholder = "";
				
			}
			inp[3].onblur = function(){
				if(telreg.test(inp[3].value)){
					
					inp[3].style.border = "1px solid #3f97ff";
				}else if(inp[3].value == ""){
					inp[3].placeholder = "请输入手机号";
					inp[3].style.border = "1px solid #f00";
				}else{
					inp[3].style.border = "1px solid #f00";
				}
			}
			
			inp[4].onfocus = function(){
				emailreg.lastIndex = 0;
				inp[4].placeholder = "";
			}
			inp[4].onblur = function(){
				if(emailreg.test(inp[4].value)){
					inp[4].style.border = "1px solid #3f97ff";
				}else if(inp[4].value == ""){
					inp[4].placeholder = "请输入电子邮箱";
					inp[4].style.border = "1px solid #f00";
				}else{
					inp[4].style.border = "1px solid #f00";
				}
			}
		</script>
		
	</body>
</html>

 

S_1978P1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java 正则表达式 compile_JAVA 正则表达式
weixin_29124947的博客
02-25 1477
许多语言，包括Perl、PHP、Python、JavaScript和JScript，都支持用正则表达式处理文本，一些文本编辑器用正则表达式实现高级“搜索-替换”功能。那么Java又怎样呢？本文写作时，一个包含了用正则表达式进行文本处理的Java规范需求(Specification Request)已经得到认可，你可以期待在JDK的下一版本中看到它。然而，如果现在就需要使用正则表达式，又该怎么办呢？...
groovy正则表达式基础1
08-08
【Groovy正则表达式基础1】 Groovy是一种基于Java平台的动态编程语言，它扩展了Java的功能，包括对正则表达式的处理。在Groovy中，正则表达式是通过`~`运算符或者使用斜杠(`/`)来定义的。这种特性使得Groovy在处理...
正则表达式
m0_54929728的博客
03-20 1382
什么是正则表达式：简单地说，正则表达式就是处理字符串的方法，它以行为单位来进行字符串的处理操作，正则表达式通过一些特殊符号的辅助，可以让用户轻易的完成查找、删除、替换某特定字符串的处理过程。正则表达式的字符串表示方法依照不同的严谨度分为：基础正则表达式、扩展正则表达式。注：正则表达式与通配符是完全不一样的东西，通配符代表的是bash操作接口的一个功能，但正则表达式是一种字符串处理的表示方式。
正则表达式基础语法以及如何应用。
yzh2776680982的博客
09-26 1747
▶ 概述一个正则表达式，就是用某种模式去匹配字符串的一个公式。很多人因为它们看上去比较古怪而且复杂所以不敢去使用，不过，经过练习后就觉得这些复杂的表达式写起来还是相当简单的, 而且, 一旦你弄懂它们，你就能把数小时辛苦而且易错的文本处理工作缩短在几分钟（甚至几秒钟）内完成。正则表达式不是只有java才有，实际上很多编程语言都支持正则表达式进行字符串操作!▶ 快速入门//目标：匹配所有四个数字//1. \\d 表示一个任意的数字//2. 创建模式对象[即正则表达式对象]//3. 创建匹配器。...
JS正则表达式完整版
热门推荐
韩利巍
07-17 9万+
目录 引言 第一章 正则表达式字符匹配攻略 1 两种模糊匹配 2. 字符组 3. 量词 4. 多选分支 5. 案例分析 第1章 小结 第二章 正则表达式位置匹配攻略 1. 什么是位置呢？ 2. 如何匹配位置呢？ 3. 位置的特性 4. 相关案例 第二章小结 第三章 正则表达式括号的作用 1. 分组和分支结构 2. 引用分组 3. 反向引用 4. 非捕获分组 ...
C#正则表达式用法总结
qq_42980743的博客
05-29 2万+
判断用户输入的密码是否合法，判断用户输入的邮箱格式是否合法.
C# 正则表达式完全指南：基础、进阶与实战示例
最新发布
java专栏
04-17 2173
C#中的正则表达式是一种强大而灵活的文本处理工具，它利用预定义的模式来匹配、提取、替换或分割字符串中的特定内容。本文将深入探讨C#中正则表达式的概念、基本结构、常用元字符、量词、分组、反向引用、替换以及正则表达式选项，并通过丰富的代码示例和详细注释来演示如何在实际编程中有效地使用它们。
关于正则表达式的讲解
主要记录嵌入式学习与开发过程。
03-06 1197
以下内容源于《linux命令行与shell脚本编程大全【第三版】》一书的整理。
正则表达式大全
qq_45882139的博客
06-09 1566
无意中从网上查找到一篇关于正则表达式的好文章，就进行了分享给大家，希望对大家有帮助。亲爱的读者朋友，如果你点开了这篇文章，说明你对正则很感兴趣。想必你也了解正则的重要性，在我看来正则表达式是衡量程序员水平的一个侧面标准。关于正则表达式的教程，网上也有很多，相信你也看了一些。与之不同的是，本文的目的是希望所有人认真读完，都有实质性的提高。本文内容共有七章，用JavaScript语言完整地讨论了正则表达式的方方面面。具体章节如下：下面简单地说说每一章都讨论了什么？正则是匹配模式，要么匹配字符，要么匹配位置。..
python正则表达式入门_Python正则表达式教程之一：基础篇
weixin_39701735的博客
11-23 242
前言之前有人提了一个需求，我一看此需求用正则表达式最合适不过。考虑到之前每次使用正则表达式，都是临时抱佛脚，于是这次我就一边完成任务一边系统的学习了一遍正则表达式。主要参考PyCon2016上的一个视频Regular Expressions。我将分几篇文章对正则表达式进行总结。以下是第一部分，基础：基础部分这里总结了正则表达式最基础的用法，其中大部分内容对我（以及大部分程序员）来说都是平时经常用到...
正则表达式入门与提高---整理版_VBa_正则式_
10-01
正则表达式是一种强大的文本处理工具，用于在字符串中...而这份"正则表达式入门与提高---整理版"文档将是你学习正则表达式的好帮手，它涵盖了基础概念、常用模式以及实例解析，是深入理解和运用正则表达式的好资源。
易语言正则表达式运用源码-易语言
06-13
一、易语言正则表达式基础 1. 正则表达式简介：正则表达式（Regular Expression）是一种模式匹配工具，可以用来检查一个字符串是否符合某种预定义的规则。在易语言中，通过内置的“正则表达式”模块，我们可以方便...
正则表达式详细文档CHM版.rar
08-12
正则表达式是一种强大的文本处理工具，用于在字符串中匹配、查找、替换或提取特定模式。它是编程语言中不可或缺的一..."正则表达式详细文档CHM版"作为一份详尽的学习材料，将帮助你更好地理解和运用这一强大的工具。
C#字符串和正则表达式参考手册
03-22
1. 正则表达式基础：正则表达式是一种模式匹配工具，用于在字符串中搜索、替换和提取特定模式。 2. 正则表达式对象：在C#中，使用`System.Text.RegularExpressions`命名空间下的`Regex`类来处理正则表达式。 3. ...
video 标签结合js实现播放暂停，广告弹出，进度条联动 video标签的简单应用
S_1978P1
08-28 3956
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0;
form表单 input输入框及属性
S_1978P1
08-02 3181
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;form表单&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!--form表单 input输入框
单伪元素跟双伪元素清除浮动方法
S_1978P1
08-07 2207
 单伪元素方法： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .clearfix:after{
三元表达式 心得笔记
S_1978P1
08-24 1353
三元表达式的嵌套写法 基础写法：a?b:c 嵌套写法：a?b:c?:d?:e  
正则表达式基础与实战
"正则表达式文字版 - 中文学习资料，非商用，涉及版权问题请联系删除" 正则表达式是编程领域中一种强大的文本处理工具，它被广泛...通过系统学习，读者可以掌握正则表达式的强大功能，并在各种编程场景中自如运用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值