正则表达式实现一个注册单

最新推荐文章于 2019-11-05 21:57:19 发布
最新推荐文章于 2019-11-05 21:57:19 发布
阅读量296 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/namechenfl/article/details/81409185
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			
			form{margin: 0 auto;width: 800px;height: 600px;border: 1px solid #ddd;position: relative;}
			#box p{margin-top: 30px;font-size: 18px;height: 44px;line-height: 40px;color: red;}
			label{margin-top: 30px;font-size: 32px;display: flex;justify-content: space-between;align-items: center;padding-left: 20px;}
			label input{margin-right: 300px;width: 300px;height: 40px;font-size: 28px;text-indent: 10px;}
			
			#btn{width: 100px;height: 40px;margin: 30px auto;display: block;}
			div{width: 280px;height: 600px;position: absolute;top: 0;right: 0;}
			
		</style>
	</head>
	<body>
		<form id="form1">
			
			<p><label for="">姓名：<input type="text" name="" id="bxm" value=""/></label></p>
			<p><label for="">联系电话：<input type="text" name="" id="blx" value=""/></label></p>
			<p><label for="">学号：<input type="text" name="" id="bbj" value=""/></label></p>
			<p><label for="">班级：<input type="text" name="" id="bzz" value=""/></label></p>
			<p><label for="">QQ：<input type="text" name="" id="bqq" value=""/></label></p>
			<input type="submit" name="" id="btn" value="提交" />
			<div id="box">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		      </div>
		</form>
		
		<script type="text/javascript">
		    var Form =document.getElementById("form1") //获取
			var Input1=document.getElementById("bxm");
			var Input2=document.getElementById("blx");
			var Input3=document.getElementById("bbj");
			var Input4=document.getElementById("bzz");
			var Input5=document.getElementById("bqq");
			var Btn=document.getElementById("btn");
			var Box=document.getElementById("box");
			
			Input1.onblur=function(){
			var str1 =Input1.value;
			var reg1 =/[^\u4e00-\u9fa5]/g;//判断中文
			if(reg1.test(str1)||str1==""){
				Box.children[0].innerHTML="输入有误，请输入中文格式";
				Box.children[0].style.color="red";
			}else{
				Box.children[0].innerHTML="输入正确";
				Box.children[0].style.color="green";
			}
			}
			Input2.onblur=function(){
			var str2 =Input2.value;
			var reg2 =/^1(3|5|7|8)\d{9}$/;//判断电话号码
			if(reg2.test(str2)){
				Box.children[1].innerHTML="输入正确";
				Box.children[1].style.color="green";
			}else{
				Box.children[1].innerHTML="输入有误，请输入正确的电话号码";
				Box.children[1].style.color="red";
			}
			}
			Input3.onblur=function(){
			var str3 =Input3.value;
			var reg3 =/^\w{6,16}$/;//判断
			if(reg3.test(str3)){
				Box.children[2].innerHTML="输入正确";
				Box.children[2].style.color="green";
			}else{
				Box.children[2].innerHTML="输入有误，请输入正确的电话号码";
				Box.children[2].style.color="red";
			}
			
			}
			Form.onsubmit=function(){//提交判断是否为空
					
				if(Input5.value==""){
					Box.children[4].innerHTML="内容不能为空";
					
				}else{
					Box.children[4].innerHTML="";
				}
				
				if(Input4.value==""){
					Box.children[3].innerHTML="内容不能为空";
					
				}else{
					Box.children[3].innerHTML="";
				}
				if(Input3.value==""){
					Box.children[2].innerHTML="内容不能为空";
					
				}else{
					Box.children[2].innerHTML="";
				}
				if(Input5.value==""||Input4.value==""||Input3.value==""){
					return false;
				}
			}
			
			
			
			
			
			
			
		</script>
	</body>
</html>

 

岁月如歌_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用正则表达式实现的登陆注册页面
qq_45743129的博客
10-29 6951
动图展示： 所有代码展示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body style="background-color: beige"> 用户名：...
利用JS及正则表达式验证创建一个简单的注册界面
weixin_43885123的博客
12-01 1470
利用JS及正则表达式验证创建一个简单的注册界面 思路： ★作为初学者还没有完全学完，改进的地方还有很多很多，望各位网友提出宝贵意见，共同学习！ 1.利用for循环在一个div里添加3个input节点； 2.添加两个div节点 ，当输入的信息不符合正则表达式的规则时用来显示错误信息； 3.当输入框失去焦点时，验证正则表达式，如果结果为false，则输出错误信息，提醒重新并按格式输入； 4.当输入框获...
注册页面常用的正则表达式
09-22
//IP地址(***.***.***.***) //邮件(***@***.**) //日期(****-**-**) //邮政编码 //电话号码 //手机号码 //时间(**:**:**) //数字
正则表达式及js校验表单代码（注册页面）
wyxqkkl的博客
08-26 1万+
校验表单             //用户名的规则：第一位是字母，只有由数字与字母组成，6位。     function checkName(){        //获取到了用户名的值        var userName = document.getElementById("username").value;        var userSp
二十四、form 表单验证+简单注册正则表达式
weixin_40976555的博客
05-28 2359
一、知识点1.JavaScript正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。（搜索模式可用于文本搜索和文本替换）2.正则表达式概念：由一个字符序列形成的搜索模式；3.语法：var 名称=/正则表达式主体/;4.字符串方法：search()方法 用于检索字符串中指定的子字符串或与正则表达式相匹配的子字符串，并返回子字符串的起始位置；replace()方法 用于在字...
Python--简单的用户注册（随机生成验证码、正则表达式判断）
CaiJin1217的博客
04-26 2021
#coding:utf-8import reimport random# 用户名 电话号码/邮箱号# 密码  数字、字母下划线# 验证码print("------注册------")userName=input("请输入用户名：")#正则表达式p1=re.compile(r"(^1[35789][0-9]{9}$)|(^[0-9a-z]{2,}@(qq|foxmail|163|139).(co...
正则表达式：注册和登录使用
我的成长之路！
08-26 1万+
手机号码:   /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/ 区号+座机号码+分机号码：regexp="^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$" 手机(中国移动手机号码)：regexp="^((\d3)|(\d{3}\-))?13[456789]\d{8}|15[89]
Java使用正则表达式对注册页面进行验证功能实现
10-21
在构建一个注册页面时，通过正则表达式验证用户输入的数据是非常常见的做法。本文将介绍如何在Java中使用正则表达式来验证注册页面的用户名和密码是否符合要求。 首先，我们需要了解正则表达式的基本语法。正则...
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
10-18
本文介绍了如何使用jQuery来实现一个用户注册表单中的密码一致性验证以及利用正则表达式对邮箱和手机号进行验证的方法。在Web开发中，表单验证是前端开发的一个重要环节，它能够帮助提高用户输入数据的准确性，减少...
JavaScript正则表达式与注册验证
专注于此刻
09-12 258
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式的用处非常广泛，下面讲解一下JavaScript下的正则表达式： 正则表达式语法： 语法1 re=/pattern/[flags] 语法2 re=newRegExp("pattern",["flags"]) ...
正则表达式验证注册页面
weixin_42433891的博客
02-24 4028
//姓名验证 function name_validation() { var format=/[\u4e00-\u9fa5]+/;//正则表达式，必须是汉字 if($('#name').val().search(format)==-1) { $('#name').next().html('姓名必须是汉字'); return false; ...
js 正则表达式验证用户注册信息
前端博客
05-05 1817
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function check() { var submitFlg = true;...
常用正则表达式大全 （转）
热门推荐
好记性不如烂笔头
03-29 35万+
网上找到的常用正则表达式，留着以后可能用得上，正则表达式实在是不好写，只好拿来主义了，在Delphi中没有自己带有正则表达式的组件，靠第三方了，都说PerlRegEx 是首选, 去这里下载，官方网站: http://www.regular-expressions.info/delphi.html。另外，万一老师在他的博客上写了PerRegEx的使用，可以去看看：http://www.cnblog
项目实战-在Vant的基础上实添加验证框架
weixin_34218579的博客
12-05 1441
Vant 一套基于Vue的移动端UI框架，有赞出品。 因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。 -------...
正则表达式,网上资料收集整理!
qffhq 点积
02-14 1837
一、正则表达式基础知识　　我们先从简单的开始。假设你要搜索一个包含字符“cat”的字符串，搜索用的正则表达式就是“cat”。如果搜索对大小写不敏感，单词“catalog”、“Catherine”、“sophisticated”都可以匹配。也就是说：　1.1句点符号　　假设你在玩英文拼字游戏，想要找出三个字母的单词，而且这些单词必须以“t”字母开头，以“n”字母结束。另外，假设有一本英文字典，你
注册登录——前端、后台验证(正则表达式)
Rick的修仙路
09-27 1万+
注册 界面如图 前端验证html页面代码 <form id="form_reg"> <div> <input type="text" id="account" name="account" placeholder="请输入邮箱" />
创建一个学生信息表
jingguo_的博客
11-05 7474
创建一个学生信息表 实现根据姓名、ID、年龄输入框的值， 1）创建对应的表格； 2）点击删除按钮，删除对应的行； 1.首先我们先写一个表格的样式。 <style> table {width: 300px;border: 1px solid gray;border-collapse: collapse; margin: 30px auto;} th,td {line-height: 35...
使用正则表达式与Ajax实现注册信息验证
"通过正则表达式和Ajax技术来实现注册信息的实时验证，包括对用户名和密码的合法性检查。" 在开发Web应用程序时，确保用户输入的数据符合预期的格式至关重要，这通常涉及到数据验证。本示例着重于使用正则表达式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值