注册页面----使用正则表达式判断输入是否合格

最新推荐文章于 2022-11-14 14:10:15 发布
最新推荐文章于 2022-11-14 14:10:15 发布
阅读量726 收藏 10
点赞数 1
分类专栏： 前端小案例 文章标签： css html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52147099/article/details/126755410
版权

案例要求：
1、当光标离开input框的时候需要验证input框的内容是否合法
2、用户名:支持中文、字母、数字、““_”的组合，4-20个字符；用户名不能是数字
3、用户名长度只能在4-20个字符之间
4、密码:建议密码做—个强中弱的效果
5、二次密码:与—次密码必须—致
6、手机号码:需要验证手机号码的正确性(不能乱输入)
在这里插入图片描述
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 450px;
				height: 650px;
				/* background-color: #3E8E41; */
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			.box1{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 16px;
				left: 20px;
				margin: auto;
			}
			.box1>.username{
				width: 25%;
				height: inherit;
				/* background-color: #008000; */
				border: 2px solid #e5e5e5;
				position: absolute;
				top: 0;
				left: 0;
				margin: auto;
			}
			.box1>.username>p{
				width: 78px;
				height: inherit;
				/* font-size: large; */
				position: absolute;
				top: 12px;
				left: 18px;
				margin: auto;
			}
			.box1>input{
				width: 75%;
				height: inherit;
				position: absolute;
				border: 2px solid #e5e5e5;
				top: 0;
				right: 0;
				
			}
			.zs{
				width: 100%;
				height: 40px;
				position: absolute;
				top: 60px;
				left: 12px;
			}
			/* 密码 */
			.box2{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 116px;
				left: 20px;
				margin: auto;
			}
			.password{
				width: 25%;
				height: inherit;
				/* background-color: #008000; */
				border: 2px solid #e5e5e5;
				position: absolute;
				top: 0;
				left: 0;
				margin: auto;
			}
			.box2>.password>p{
				width: 78px;
				height: inherit;
				/* font-size: large; */
				position: absolute;
				top: 12px;
				left: 11px;
				margin: auto;
			}
			.box2>input{
				width: 75%;
				height: inherit;
				position: absolute;
				border: 2px solid #e5e5e5;
				top: 0;
				right: 0;
				
			}
			/* 确认密码 */
			.box3{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 190px;
				left: 20px;
				margin: auto;
			}
			.box3>.password>p{
				width: 78px;
				height: inherit;
				/* font-size: large; */
				position: absolute;
				top: 12px;
				left: 11px;
				margin: auto;
			}
			.box3>input{
				width: 75%;
				height: inherit;
				position: absolute;
				border: 2px solid #e5e5e5;
				top: 0;
				right: 0;
				
			}
			/* 手机 */
			.box4{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 270px;
				left: 20px;
				margin: auto;
			}
			.phone{
				width: 25%;
				height: inherit;
				/* background-color: #008000; */
				border: 2px solid #e5e5e5;
				position: absolute;
				top: 0;
				left: 0;
				margin: auto;
			}
			.box4>.phone>p{
				width: 85px;
				height: inherit;
				
				position: absolute;
				top: 14px;
				left: 12px;
				margin: auto;
			}
			.box4>input{
				width: 75%;
				height: inherit;
				position: absolute;
				border: 2px solid #e5e5e5;
				top: 0;
				right: 0;
				
			}
			/* 验证码 */
			.box5{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 352px;
				left: 20px;
				margin: auto;
			}
			.yzm{
				width: 25%;
				height: inherit;
				/* background-color: #008000; */
				border: 2px solid #e5e5e5;
				position: absolute;
				top: 0;
				left: 0;
				margin: auto;
			}
			.box5>.yzm>p{
				width: 85px;
				height: inherit;
				
				position: absolute;
				top: 14px;
				left: 18px;
				margin: auto;
			}
			.box5>input{
				width: 75%;
				height: inherit;
				position: absolute;
				border: 2px solid #e5e5e5;
				top: 0;
				right: 0;
				
			}
			/* 手机验证码 */
			.box6{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 432px;
				left: 20px;
				margin: auto;
			}
			.phoneyzm{
				width: 25%;
				height: inherit;
				/* background-color: #008000; */
				border: 2px solid #e5e5e5;
				position: absolute;
				top: 0;
				left: 0;
				margin: auto;
			}
			.box6>.phoneyzm>p{
				width: 85px;
				height: inherit;
				
				position: absolute;
				top: 14px;
				left: 7px;
				margin: auto;
			}
			.box6>input{
				width: 55%;
				height: inherit;
				position: absolute;
				border: 2px solid #e5e5e5;
				top: 0;
				right: 80px;
				
			}
			#hq{
				width: 20%;
				height: inherit;
				position: absolute;
				/* border: 2px solid #d0f8fa; */
				background-color: #d0f8fa;
				top: 2px;
				right: 0;
			}
			/* 勾选 */
			.box7{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 522px;
				left: 20px;
				margin: auto;
			}
			/* 注册 */
			.box8{
				width: 90%;
				height: 50px;
				/* background-color: #000000; */
				
				position: absolute;
				top: 566px;
				left: 20px;
				margin: auto;
			}
			
			.t{
				color: #FF0000;
				font-size:16px;
				position: absolute;
				top: 16px;
				right: 22px;
			}
		</style>
	</head>
	<body>
		<form action="../navigation/test.html" method="get">
			<div class="container">
				<div class="box1">
					<div class="username">
						<p><span>用 户 名</span></p>
					</div>
					<input type="text" name="username" id="username" placeholder="请输入您的用户名" value="" style="font-size: large;" onfocus="YHMonfocu()" onblur="YHMonblus()" />
					<div class="zs">
						<p><span style="color: #bababa;">支持中文、字母、数字、"_"、"-"的组合，4-20个字符</span></p>
					</div>
					<span id="YHMerror" class="t"></span>
				</div>
				
				<div class="box2">
					<div class="password">
						<p><span>设置密码</span></p>
					</div>
					<input type="text" name="password" id="password" value="" placeholder=" 建议至少使用两种字符" style="font-size: large;" onfocus="PWDonfocu()" onblur="PWDonblus()"/>
					<span id="PWDchoose" class="t"></span>
				</div>
				
				<div class="box3">
					<div class="password">
						<p><span>确认密码</span></p>
					</div>
					<input type="text" name="password" id="password1" value="" placeholder=" 确认密码"  style="font-size: large;" onfocus="PWD1onfocu()" onblur="PWD1onblus()"/>
					<span id="PWDchoose1" class="t"></span>
				</div>
				<div class="box4">
					<div class="phone">
						<p><span>中国 + 86</span></p>
					</div>
					<input type="text" name="phone" id="phone" value="" placeholder=" 建议常用手机" style="font-size: large;" onfocus="LXDHonfocu()" onblur="LXDHonblus()"/>
					<span id="LXDHerror" class="t"></span>
				</div>
				<div class="box5">
					<div class="yzm">
						<p><span>验 证 码</span></p>
					</div>
					<input type="text" name="yzm" id="yzm" value="" placeholder=" 请输入验证码" style="font-size: large;"/>
				</div>
				<div class="box6">
					<div class="phoneyzm">
						<p><span>手机验证码</span></p>
					</div>
					<input type="text" name="phoneyzm" id="phoneyzm" value="" placeholder=" 手机短信验证码" style="font-size: large;"/>
					<button type="button" id="hq">获取验证码</button>
				</div>
				<div class="box7">
					<input type="checkbox" name="read" id="read" value="" /> 我已阅读并同意<a href="">《京东用户注册协议》</a>
				</div>
				<div class="box8">
					<input type="submit" name="register" id="register" value="立即注册" style="width: 100%;height: 50px; background-color: #e5141f; color: white;
					border: white;"/>
				</div>
			</div>
		</form>
		
		<script type="text/javascript">
			function YHMonblus(){
				var username = document.getElementById("username");
				var re = /^[a-zA-Z0-9-_]{4,20}$/;
				var num = /^[0-9]*$/;
				if(username.value==""){
					document.getElementById('YHMerror').innerText="请输入用户名";
				}else if(username.value.length<4||username.value.length>20){
					console.log(username.value);
					document.getElementById('YHMerror').innerText="格式错误,长度应为6-18个字符";
				}else if(num.test(username.value)){
					console.log(num.test(username.value));
					document.getElementById('YHMerror').innerText="格式错误,不能为纯数字";
				}
			}
			function YHMonfocu(){
				document.getElementById('YHMerror').innerText = "";
			}
			
			function PWDonblus(){
				var password = document.getElementById("password");
				var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{6,}$/;
				var num = /^[0-9]*$/;
				if(password.value==""){
					document.getElementById('PWDchoose').innerText="密码不能为空";
				}else if(password.value.length<6||password.value.length>20){
					document.getElementById('PWDchoose').innerText="格式错误,长度应为6-20个字符";
				}else if(password.value.length<=10&&num.test(password.value)){
					console.log(password.value);
					document.getElementById('PWDchoose').innerText="弱";
				}else if(password.value.length>10&&password.value.length<20&&num.test(password.value)){
					console.log(num.test(password.value));
					document.getElementById('PWDchoose').innerText="中";
				}else if(password.value.length>10&&re.test(password.value)){
					console.log(re.test(password.value));
					document.getElementById('PWDchoose').innerText="强";
				}
			}
			function PWDonfocu(){
				document.getElementById('PWDchoose').innerText = "";
			}
			
			
			function PWD1onblus(){
				var password = document.getElementById("password");
				var password1 = document.getElementById("password1");
				if(password1.value==""){
					document.getElementById('PWDchoose1').innerText="密码不能为空";
				}else if(password.value!=password1.value){
					document.getElementById('PWDchoose1').innerText="请输入相同密码";
				}
			}
			function PWD1onfocu(){
				document.getElementById('PWDchoose1').innerText = "";
			}
			
			function LXDHonblus(){
			        var phone=document.getElementById("phone");
			        var re = /^1\d{10}$/;
			        if(phone.value==""){
			            document.getElementById('LXDHerror').innerText="请输入联系电话";
			        }
			        else if(!re.test(phone.value)){
			            document.getElementById('LXDHerror').innerText="电话格式输入错误";
			        }
			        else {
			            document.getElementById('LXDHerror').innerText ="";
			        }
			    }
			    function LXDHonfocu(){
			        document.getElementById('LXDHerror').innerText ="";
			    }

		</script>
	</body>
</html>
賣可樂的男孩
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java使用正则表达式对注册页面进行验证功能实现
10-21
本文给大家分享一段有关java使用正则表达式对注册页面进行验证的代码，代码比较简单，非常不错，感兴趣的朋友一起学习吧
JSP用户注册的正则表达式
http://kingim.cn/
03-27 4864
/* private String username; 用户名不能为空，并且要是3-8的字符 abcdABcd private String password; 密码不能为空，并且要是3-8的数字 private String password2; 两次密码要一致 private String email; 可以为空，不为空要是一个合法的邮箱 private String b
使用正则表达式验证注册页面（用户名，密码，确认密码，邮箱，手机号）
斯维特哈特
01-18 2万+
原文链接： 使用正则表达式验证注册页面（用户名，密码，确认密码，邮箱，手机号） html部分 &lt;style type="text/css"&gt; body{ margin:0; padding:0; font-size:12px; line-height:20px; } .main{ width:525px; margin-left:...
用正则表达式实现的登陆注册页面
qq_45743129的博客
10-29 6852
动图展示： 所有代码展示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body style="background-color: beige"> 用户名：...
Java基础题——注册验证（字符串的简单运用）
Alcaibur的博客
11-14 279
注册验证中的字符串的简单运用
Java_验证键盘输入的用户名不能为空，长度大于6，不能有数字
Chill Lyn
07-18 3091
import java.util.Scanner; class Username { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); System.out.println("Please input your username: "); String usernam...
doi-regex:匹配DOI的正则表达式
04-30
正则表达式 匹配DOI的正则表达式 DOI的一部分： 目录标识符：10 注册人代码：。 + [0-9] {4，} 注册人细分（可选）：。 + [0-9] + 后缀：// +任何字符，对ASCII字符不区分大小写（但在注册表中大写），其中某些...
T-SQL中使用正则表达式函数
10-29
有想过在T-Sql使用正则表达式吗？是的，完全可以的，我们可以用SQL SERVER CLR sql function来实现这一功能。
java使用正则表达式判断邮箱格式是否正确的方法
09-03
主要介绍了java使用正则表达式判断邮箱格式是否正确的方法,涉及java正则表达式及字符串的相关操作技巧,需要的朋友可以参考下
SQL 正则表达式及mybatis中使用正则表达式
12-13
mysql 提供的模式匹配的其他类型是使用扩展正则表达式。 当你对这类模式进行匹配测试时，使用REGEXP和NOT REGEXP操作符(或RLIKE和NOT RLIKE，它们是同义词)。 扩展正则表达式的一些字符是： “.”匹配任何单个的...
Javascript 案例:验证登录用户名
Weary_PJ的博客
07-23 3686
Javascript 案例:验证登录用户名 为了详细的介绍一下JS中的DOM模型,于是决定举个例子来说明一下,方便理解 下图是JS中DOM模型,我们可以把它当成一个类 ,并通过.来获取类中的属性 在登录界面,我们通常碰到过这样的问题,比如用户名不合法,没有首字母开头等等 下面我就简单的实现一下 需求 我们的需求如下 当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。 这是一个非常简单的登录界面,为了演示方便,就不加什么c
正则表达式-验证用户名输入是否正确
雷加祥的博客
05-13 1184
创建一个输入框和一个span标签 css样式 span标签为常用样式 其它两个为后期判断做准备 span{ color: #aaa; font-size: 14px; } .right{ color: green; } .wrong{ color: red; } <input type="text" class="uname"><span>请输入用户名</span> JavaS.
正则表达式验证注册页面
weixin_42433891的博客
02-24 3968
//姓名验证 function name_validation() { var format=/[\u4e00-\u9fa5]+/;//正则表达式，必须是汉字 if($('#name').val().search(format)==-1) { $('#name').next().html('姓名必须是汉字'); return false; ...
JavaScript正则表达式实现注册信息校验
zhansan的博客
05-28 5920
Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式的内容就返回true 正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果 \d{3} a123b false true ^\d{3} 123b false true \d{3}$ a123 false true ^\d{3}$ 123 true true 注册信息校验 需求 在JS中使用正则表达
用正则表达式验证用户名是否合法
热门推荐
rugaxm的专栏
07-14 4万+
在网页的注册页面往往需要验证用户名是否合法。比如如下条件： ·由字母a～z(不区分大小写)、数字0～9、点、减号或下划线组成 ·只能以字母开头，包含字符 数字 下划线，例如：beijing.2008 ·用户名长度为4～18个字符 JavaScript代码如下： function ckname(){ var user = document.getElementById('user
利用JavaScript的正则表达式去实现 注册页面的验证（账号，邮箱，手机号，用户名）
weixin_45851575的博客
05-04 5299
利用JavaScript的正则表达式去实现 注册页面的验证（账号，邮箱，手机号，用户名） 先新建一个表单效果如下： Script代码的实现 <script type="text/javascript" > //校验ID function checkID(str) { var ID=/^[0-9]{10}$/;// /^开始的意思 &/关闭的意思 [0-9]查找从0-9的数 花括号{10}一共为十位数 return ID.test(s
java用户注册校验_Java使用正则表达式对注册页面进行验证功能实现
weixin_33634121的博客
02-13 799
本文给大家介绍java使用正则表达式对注册页面进行验证的代码，代码如下所示：package regex;import java.util.Scanner;import java.util.regex.Matcher;import java.util.regex.Pattern;public class registered {public static void main(String[] arg...
正则表达式案例：用户名验证
icemwj的博客
08-19 7797
案例：用户名验证 功能需求： 如果用户名输入合法，则后面提示信息为 ： 用户名合法，并且颜色为绿色。 如果用户名输入不合法， 则后面提示信息为： 用户名不符合规范，并且颜色为红色。 分析: 用户名只能为英文字母，数字，下划线或者短横线组成,，并且用户名长度为 6~16位。 首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/ 当表单失去焦点就开始验证。 如果符合正则规范,，则让后面的 span 标签添加 right 类。 如果不符合正则规范， 则让后面的 span 标签添加 w
正则表达式的用户名合法性
mulanlong的博客
10-02 5853
1.首字母为中英文，至少两个字符 /**姓名是否合法*/ public static boolean isLegalName(String mobiles) { Pattern p = Pattern .compile("^[\\u4e00-\\u9fa5a-zA-Z][\\u4e00-\\u9fa5a-zA-Z]+$");
java-正则表达式判断手机号
最新发布
05-26
可以使用以下正则表达式判断手机号： ```java String regex = "^1[3-9]\\d{9}$"; ``` 其中，`^` 表示字符串的开始，`$` 表示字符串的结束，`\\d` 表示任意数字，`{9}` 表示前面的数字重复出现9次，`[3-9]` 表示第二位数字必须是3到9之间的数字，`1` 表示以1开头。 可以使用 `matches()` 方法来判断一个字符串是否符合该正则表达式： ```java String phone = "13812345678"; if (phone.matches(regex)) { System.out.println("是手机号"); } else { System.out.println("不是手机号"); } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值