JS正则表达式-登陆注册

最新推荐文章于 2024-04-19 16:13:24 发布
最新推荐文章于 2024-04-19 16:13:24 发布
阅读量2.4k 收藏 21
点赞数
分类专栏： javascript效果类 文章标签： 正则表达式

要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间
密码两次验证必须一致，用户名密码不能为空。

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >  
    <title>模拟注册</title>  
    <style type="text/css">  
        *{
            margin:0;  
             padding:0;   
             font-size:14px;   
             font-famliy:"微软雅黑";  
             font-style:normal; 
        }  
        body{
            background:#FBFBFB;
        }  
        .container{  
            border:solid 1px #F1F1F1;  
            width:600px;  
            height:600px;  
            background:#fff;  
            margin:20px auto;  
            padding-bottom:10px;  
        }  
        .container h1{  
            font-size:22px;  
            font-family:微软雅黑;  
            text-align:center;  
            color:#333;  
            display:block;  
            margin:20px;  
            border:0px solid gray;  
        }  
        .div1{  
            margin-left:55px;  
        }  
        #Name,#Pwd1,#Pwd2,#telphone{  
            color:gray;  
            height:25px;  
            width:200px;  
            font-size:10px;  
            padding-left:10px;  
            margin-top:10px;  
        }  
        #btn1,#btn2{  
            height:25px;  
            width:60px;  
            display:block;  
            float:left;  
            margin-left:70px;  
            margin-top:20px;  
        }  
        #sex1,#sex2{  
            margin-left:10px;  
            margin-top:20px;  
            line-height:30px;  
            width:13px;  
            border:1px solid gray;  
        }  
        #phone1{  
            width:45px;  
        }  
        #phone2{  
            width:80px;  
        }  
        #phone3{  
            width:45px;  
        }  
        #phone1,#phone2,#phone3{  
            color:gray;  
            height:25px;  
            font-size:10px;  
            padding-left:5px;  
            margin-top:10px;  
        }  
        #hobby1,#hobby2,#hobby3,#hobby4,#hobby5,#hobby6{  
            color:gray;  
            height:25px;  
            line-height:30px;  
            font-size:10px;  
            width:13px;  
            vertical-align:middle;  
            margin-left:5px;  
            margin-top:10px;  
        }  
        #lname,#ltelphone,#lphone,#lpass1,#lpass2{  
            color:#FF0000;   
            font-size:10px;  
        }  
    </style>    
    <script>  
        window.onload= function(){  
            var userName = document.getElementById("Name");  
            var lableName = document.getElementById("lname");  
            var password1 = document.getElementById("Pwd1");  
            var password2 = document.getElementById("Pwd2");  
            var labelPassword1 = document.getElementById("lpass1");  
            var labelPassword2 = document.getElementById("lpass2");  
            var telphone = document.getElementById("telphone");  
            var labelTelphone = document.getElementById("ltelphone");  
            var phone1 = document.getElementById("phone1");  
            var phone2 = document.getElementById("phone2");  
            var phone3 = document.getElementById("phone3");  
            var labelPhone = document.getElementById("lphone");  
            userName.onblur = function(){  
                var nameValue = userName.value;  
                var pattern = /^[a-zA-Z_]\w{5,19}$/g;  
                if(nameValue =="" || nameValue==null){  
                    lableName.innerHTML = "用户名不能为空!";  
                }  
                else if(pattern.test(nameValue)){  
                    lableName.innerHTML = "正确!";  
                }  
                else{  
                    lableName.innerHTML = "数字不能开头,长度在6-20位之间！";  
                }  
            }  
            password1.onblur = function(){  
                var passValue = password1.value;  
                var pattern = /^\w{6,15}$/g;  
                if(pattern.test(passValue)){  
                    labelPassword1.innerHTML = "正确!";  
                }  
                else if(passValue =="" || passValue==null){  
                    labelPassword1.innerHTML = "密码不能为空!";  
                }  
                else{  
                    labelPassword1.innerHTML = "密码长度在6-15位之间！";  
                }  
            }  
            password2.onblur = function(){  
                var pass1Value = password1.value;  
                var pass2Value = password2.value;  
                if(pass2Value =="" || pass2Value==null){  
                    labelPassword2.innerHTML = "密码不能为空!";  
                }  
                else if(pass1Value == pass2Value){  
                    labelPassword2.innerHTML = "输入正确!";  
                }  
                else if(pass1Value!=pass2Value){  
                    labelPassword2.innerHTML = "两次密码输入不一致!";  
                }  
                else{  
                    labelPassword2.innerHTML = "密码长度在6-15位之间！";  
                }  
            }  
            telphone.onblur = function(){  
                var telValue = telphone.value;  
                var pattern = /^1(83|52|38|)\d{8}$/g;  
                if(pattern.test(telValue)){  
                    labelTelphone.innerHTML = "正确!";  
                }  
                else if(telValue =="" || telValue==null){  
                    labelTelphone.innerHTML = "手机号码不能为空!";  
                }  
                else{  
                    labelTelphone.innerHTML = "长度必须11位！";  
                }  
            }  
            phone1.onblur = function(){  
                var phone1Value = phone1.value;  
                var pattern = /^\d{3,4}$/g;  
                if(pattern.test(phone1Value)){  
                    labelPhone.innerHTML = "区号正确!";  
                }  
                else if(phone1Value =="" || phone1Value==null){  
                    labelPhone.innerHTML = "区号不能为空!";  
                }  
                else{  
                    labelPhone.innerHTML = "区号必须3-4位！";  
                }  
            }  
            phone2.onblur = function(){  
                var phone2Value = phone2.value;  
                var pattern = /^\d{7,8}$/g;  
                if(pattern.test(phone2Value)){  
                    labelPhone.innerHTML = "号码正确!";  
                }  
                else if(phone2Value == "" || phone2Value == null){  
                    labelPhone.innerHTML = "号码不能为空!";  
                }  
                else{  
                    labelPhone.innerHTML = "号码必须7-8位！";  
                }  
            }  
            phone3.onblur = function(){  
                var phone3Value = phone3.value;  
                var pattern = /^(\d{1,4})?$/g;  
                if(pattern.test(phone3Value)){  
                    labelPhone.innerHTML = "正确!";  
                }  
                else{  
                    labelPhone.innerHTML = "错误！";  
                }  
            }  

        }  
    </script>  
</head>  
<body>  
    <div class="container">  
        <h1>注册</h1>  
        <div class="div1">  
          用户名： <input type = "text" placeholder = "输入用户名" id = "Name"/>  
        <label id="lname"></label><br/>  
          密码：  <input type = "text" placeholder = "输入密码" id = "Pwd1"/>  
        <label id="lpass1"></label><br/>  
          确认密码：<input type = "text" placeholder = "再次输入密码" id = "Pwd2"/>  
        <label id="lpass2"></label><br/>  
            性别：<input type="radio"  name="sex" id="sex1"/>  男  
         <input type="radio"  name="sex" id="sex2"/>  女<br/>  
           手机号码：<input type="text" placeholder="手机号" id="telphone"/>  
         <label id="ltelphone"></label><br/>  
           固定电话：<input type="text" id="phone1"/>-<input type="text" id="phone2"/>-<input type="text" id="phone3"/>  
         <label id="lphone"></label><br/>  
           兴趣爱好:<input type="checkbox" id="hobby1"/>全选<input type="checkbox" id="hobby2"/>音乐<input type="checkbox" id="hobby3"/>美术<input type="checkbox" id="hobby4"/>运动<input type="checkbox" id="hobby5"/>读书<input type="checkbox" id="hobby6"/>编程<br/>  
         <input type="button" value="注册" id="btn1"/>  
         <input type="reset"  value="重置" id="btn2"/>  
        </div>      
    </div>    
</body>  
</html>
oing
关注
  • 0
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
正则表达式+JS效果
hyt_123456的博客
10-15 253
标题 正则表达式 在这里插入代码片 ```<script src="verify.js"></script> <style type="text/css"> #div{ margin-top: 40px; margin-left: 1800px; font-size: 50px; height: 40px; ...
使用正则表达式验证登录页面输入是否符合要求
12-13
先给大家展示下效果图： 废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> [removed][removed] [removed] $(function() { $("input[name='uname']").blur(function() { //失去焦点 var namestr = $(this).val(); var regstr = /^[\u
js正则表达式注册页面表单验证
10-21
主要为大家详细介绍了js正则表达式注册页面表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js中用正则表达式验证用户注册信息，面试题解析
sahtk89452的博客
04-17 805
var regemail={regstr:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,tip:‘请确认邮箱格式’};var regemail={regstr:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,tip:‘请确认邮箱格式’};var regphone={regstr:/^1\d{10}$/,tip:‘请输入11位的手机号’};”+“两次输入的密码不一致”+“
js中用正则表达式验证用户注册信息
最新发布
2401_84097820的博客
04-19 354
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-vBAIGhKr-1713514338796)][外链图片转存中…(img-gZtheMPN-1713514338796)][外链图片转存中…(img-4V7QafJs-1713514338796)][外链图片转存中…(img-EXvCh4ZA-1713514338797)]
JS正则表达式验证账号、手机号、电话和邮箱
weixin_33895657的博客
09-28 619
效果体验：http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法验证规则：字母、数字、下划线组成，字母开头，4-16位。 function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.test(str)){ alert("正确"...
常用正则表达式大全，手机、电话、邮箱、身份证(最严格的验证)、IP地址、网址、日期等，一般前台js验证，来这里就够了...
热门推荐
注销中...
11-10 7万+
/*  * 手机号码格式  * 只允许以13、15、18开头的号码  * 如：13012345678、15929224344、18201234676  */ var regMobile=/^1[3,5,8]\d{9}$/; /*  * 固定电话号码格式  * 因为固定电话格式比较复杂，情况比较多，主要验证了以下类型  * 如：010-12345678、0912-1234567、(
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证
html 邮箱 手机号码验证,JS正则表达式验证账号、手机号、电话和邮箱
weixin_39918043的博客
06-22 392
JS正则表达式验证账号、手机号、电话和邮箱刘振兴代码分享2015年11月17日104525条评论验证帐号是否合法验证规则：字母、数字、下划线组成，字母开头，4-16位。functioncheckUser(str){varre= /^[a-zA-z]\w{3,15}$/;if(re.test(str)){alert("正确");}else{alert("错误");}}checkUser("jihua...
js登陆验证与注册验证，正则表达式
01-13
基本的一些登陆注册验证，如：长度验证、数字验证、非空、字母等
【作业】jsp+MySQL实现登陆注册验证
08-21
例如，身份证号的正则表达式可以是`^\d{15}|\d{18}$`，电话号码可能为`^1[3-9]\d{9}$`，邮箱则通常为`^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`。 登录验证包括两部分：一是验证用户名是否已注册，即在...
简单登陆注册页面
05-30
这个项目名为“简单登录注册页面”，旨在帮助新手理解基本的HTML、CSS和JavaScript技术，以及如何运用正则表达式进行表单验证。以下是这个项目涉及的关键知识点： 1. **HTML**：HTML（超文本标记语言）是网页内容的...
PHP实现的用户注册表单验证功能简单示例
01-02
注册界面 register.html 用户注册 <form method=post action=register_verify.php> <input type=text placeholder=用户名 name=username> <br> <input type=password placeholder=密码 name...
仿魅族登陆注册表单验证
06-01
本项目名为“仿魅族登陆注册表单验证”，其目标是创建一个与魅族登录界面类似的用户体验，包括文本框的验证提示、正则表达式验证以及选项卡切换效果。下面我们将详细探讨这些知识点。 首先，**文本框未输入内容时的...
使用正则表达式验证注册页面（用户名，密码，确认密码，邮箱，手机号）
斯维特哈特
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:...
js如何使用正则表达式验证电话号码（可选区号）和邮箱？（分步骤）
weixin_33853794的博客
05-28 1009
js如何使用正则表达式验证电话号码（可选区号）和邮箱？（分步骤） 一、总结 js进阶正则表达式16电话号码和邮箱正则（分类解决邮箱验证）（分组加？解决电话号码区号选择问题）（[\w\.-]中括号解决邮箱前半字段的多种情况） 1、var reg=/^(\d{3,4}-)?\d{7,8}$/ //1、分组加？解决电话号码区号选择问题 2、var reg=/^[\w\.-]+@[a-z0-9]+...
js实现用正则表达式验证身份证，手机号，邮箱，
weixin_69218754的博客
10-18 598
js实现用正则表达式验证身份证，手机号，邮箱，
js 正则表达式校验各种类型数字、邮箱、手机号...
qq_58340302的博客
03-11 1213
数字：/^[0-9]*$/ n位的数字：/^\d{n}$/ 至少n位数字：/^\d{n,}$/ m-n位的数字：/^\d{m,n}$/ 零和非零开头的数字：/^(0|[1-9][0-9]*)$/ 有两位小数的正实数：/^[0-9]+(.[0-9]{2})?$/ 有1-3位小数的正实数：/^[0-9]+(.[0-9]{1,3})?$/ 非零的正整数：/^\+?[1-9][0-9]*$/ 非零的负整数：/^\-[1-9][0-9]*$/ 非负整数：/^\d+$/ 正整数：/^\d*$/ 非正整数：.......
js正则实现用户登录注册
赵佳敏的博客
10-11 3395
js正则实现用户登录注册一、效果图二、实现思路三、核心代码 一、效果图 二、实现思路 第一步：分别对帐号、密码、验证码进行验证，先判断账号、密码、验证码的值是否存在，不存在则引出对应error信息。 第二步：如果值存在，使用正则判断值是否符合要求，正确输出信息，不正确输出error的信息。 第三步：设置表单失焦出现对应的error信息，获焦移除当前的error。 第四步：表单提交的时候，按钮进行获焦，如果没有错误信息就进行提交，并且清除所有信息。 三、核心代码 &lt.
正则表达式 - 可视化工具
03-22
正则表达式是一种用于匹配和操作文本的强大工具。它可以用来搜索、替换、验证和提取文本中的特定模式。正则表达式由一系列字符和特殊字符组成，可以用来描述字符串的模式。 正则表达式的可视化工具可以帮助用户更...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值