jQuery正则验证注册页面详解-js教程-PHP中文网

首页

web前端

js教程

jQuery正则验证注册页面详解

小云云

Jan 10, 2018 am 09:40 AM

jquery 注册页面

本文主要介绍了jQuery正则验证注册页面功能,涉及针对用户名、密码、邮箱、手机号等的正则验证操作技巧,需要的朋友可以参考下，希望能帮助到大家。

本文实例讲述了jQuery正则验证注册页面功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正则验证注册页面</title>
  <style type="text/css">
    .red{
      color:#cc0000;
      font-weight:bold;
    }
  </style>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script language="JavaScript">
    function $(elementId){
      return document.getElementById(elementId).value;
    }
    function pId(elementId){
      return document.getElementById(elementId);
    }
//    用户名验证
    function checkUser(){
      var user = $("user");
      var userId = pId("user_prompt");
      userId.innerHTML="";
      var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
      if(reg.test(user)==false){
          userId.innerHTML="用户名不正确";
        return false;
      }
      return true;
    }
//    password check
    function checkPwd(){
      var pwd = $("pwd");
      var pwdId = pId("pwd_prompt");
       pwdId.innerHTML="";
      var reg = /^[a-zA-Z0-9]{4,10}$/;
      if(reg.test(pwd)==false){
        pwdId.innerHTML = "密码不能含有非法字符，长度在4-10之间";
        return false;
      }
      return true;
    }
     function checkRepwd(){
       var repwd = $("repwd");
       var pwd = $("pwd");
       var repwdId = pId("repwd_prompt");
        repwdId.innerHTML=""
       if(pwd!=repwd){
         repwdId.innerHTML="两次密码不一致";
         return false;
       }
       return true;
     }
//   邮箱验证
    function checkEmail(){
      var email = $("email");
      var email_prompt = pId("email_prompt");
      email_prompt.innerHTML="";
      var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
       if(reg.test(email)==false){
         email_prompt.innerHTML="Email格式不对，请输入正确email";
         return false;
       }
      return true;
    }
//      手机号验证
    function checkMobile() {
      var mobile = $("mobile");
      var mobileId = pId("mobile_prompt");
      mobileId.innerHTML="";
      var reMobile = /^1\d{10}$/;
       if (reMobile.test(mobile)==false){
         mobileId.innerHTML="手机号输入有误";
         return false;
       }
      return true;
    }
//    生日验证
    function checkBirth(){
      var birth = $("birth");
      var birthId = pId("birth_prompt");
      birthId.innerHTML="";
      var reg = /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
      if(reg.test(birth)==false){
        birthId.innerHTML="生日格式不对";
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
<table class="main" border="0" callpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/logo.jpg" alt="logo"><img src="images/banner.jpg" alt="banner"></td>
  </tr>
  <tr>
    <td class="hr_1">新用户注册</td>
  </tr>
  <tr>
    <td style="height: 10px;"></td>
  </tr>
    <form action="" method="post" name="myform">
  <tr>
     <td><table>
       <tr>
         <td class="left">用户名：</td>
         <td class="center"><input type="text" id="user" class="in" onblur="checkUser()"></td>
         <td><p id="user_prompt">用户名由英文字母和数字组成-4到16位字符，以字母开头</p></td>
       </tr>
       <tr>
         <td class="left">密码：</td>
         <td class="center"><input type="password" id="pwd" class="in" onblur="checkPwd()"></td>
         <td><p id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</p></td>
       </tr>
       <tr>
         <td class="left">确认密码：</td>
         <td class="center"><input type="password" id="repwd" class="in" onblur="checkRepwd()"></td>
         <td><p id="repwd_prompt"></p></td>
       </tr>
       <tr>
         <td class="left">电子邮箱：</td>
         <td class="center"><input type="text" id="email" class="in" onblur="checkEmail()"></td>
         <td><p id="email_prompt"></p></td>
       </tr>
       <tr>
         <td class="left">手机号码：</td>
         <td class="center"><input type="text" id="mobile" class="in" onblur="checkMobile()"></td>
         <td><p id="mobile_prompt"></p></td>
       </tr>
       <tr>
         <td class="left">生日：</td>
         <td class="center"><input type="text " id="birth" class="in" onblur="checkBirth()"></td>
         <td><p id="birth_prompt"></p></td>
       </tr>
       <tr>
         <td class="left"> </td>
         <td class="center"><input name="" type="image" src="images/register.jpg" /></td>
         <td> </td>
       </tr>
     </table>
     </td>
  </tr>
  </form>
</table>
</body>
</html>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7690

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

小红书怎么注册多个账号？注册多个账号会被发现吗？ Mar 25, 2024 am 09:41 AM

小红书作为一款集社交和电商于一身的平台，吸引了越来越多的用户加入。有些用户希望能够注册多个账号以便更好地体验和小红书互动。那么，小红书怎么注册多个账号呢？一、小红书怎么注册多个账号？1.使用不同手机号码注册目前，小红书主要采用手机号码注册账号的方式。用户有时会尝试购买多个手机号码卡，并利用它们注册多个小红书账号。但这种做法有一些限制，因为购买多个手机号码卡比较麻烦且成本较高。2.使用邮箱注册除了手机号码，邮箱也可以用来注册小红书账号。用户可以准备多个邮箱地址，然后分别用这些邮箱地址注册账号。不过

怎么注册小红书账号？注册小红书账号需要什么？ Mar 22, 2024 am 10:16 AM

小红书，一个集生活、娱乐、购物、分享于一体的社交平台，已经成为众多年轻人日常生活中不可或缺的一部分。那么，如何注册小红书账号呢？一、怎么注册小红书账号？1.打开小红书官网或下载小红书APP。点击下方的“注册”按钮，您可以选择不同的注册方式。目前，小红书支持手机号、邮箱以及第三方账号（如微信、QQ、微博等）进行注册。3.填写相关信息。根据选择的注册方式，填写相应的手机号、邮箱或第三方账号信息。4.设置密码。设置一个强壮的密码，确保账号安全。5.完成验证。根据提示完成手机验证或邮箱验证。6.完善个人

小红书账号怎么注册？它的账号异常怎么恢复？ Mar 21, 2024 pm 04:57 PM

小红书作为全球最受欢迎的生活方式分享平台之一，吸引了大量用户关注。那么，如何注册小红书账号呢？本文将为您详细介绍小红书账号的注册流程，并解答小红书账号异常如何恢复的问题。一、小红书账号怎么注册？1.下载小红书APP：在手机应用商店搜索并下载小红书APP，安装完成后打开。2.注册账号：打开小红书APP后，点击首页右下角的“我”按钮，然后选择“注册”。3.填写注册信息：根据提示填写手机号码、设置密码、验证码等注册信息。4.完善个人资料：注册成功后，根据提示完善个人资料，如姓名、性别、生日等。5.设置

qooapp账号怎么注册 Mar 19, 2024 pm 08:58 PM

qooapp是能够下载很多游戏的软件，那么账号怎么注册呢?用户们需要点击还没有通行证，去注册这个按键，然后选择一种注册方式就可以了。这篇账号注册方法介绍够告诉大家具体该怎么操作，下面就是具体的介绍，赶紧看看吧。qooapp账号怎么注册答：点击去注册，然后选择一种注册方式具体方法：1、首先进入登录界面后，点击下面的还没有通行证?现在申请。2、之后选择一个自己需要的登录方式。3、之后就能够直接使用了。官网注册：1、打开网站https://apps.ppaooq.com/，点击右上角注册。2、选择注册

如何看微信注册了多久？看微信注册了多久的方法 Mar 13, 2024 am 08:52 AM

微信是一款广受欢迎的社交软件，功能丰富，用户众多。想要查看微信注册了多久，虽然微信本身并未直接提供查看注册时间的功能，但我们可以通过一些间接方式来推测。但是这些方法并非绝对准确，因为各种因素都可能影响结果的精确性。若对注册时间有精确需求，建议联系微信客服咨询。如何看微信注册了多久？看微信注册了多久的方法第一种方法是通过查看QQ邮箱。如果你使用QQ登录的微信，那么注册成功后，QQ邮箱会收到微信发送的欢迎邮件。你可以在QQ邮箱中搜索“微信”查看是否有这样的邮件，进而确定注册时间。第二种方法是通过查看

一个手机号怎么注册两个B站号？B站怎么解除手机绑定呢？ Mar 21, 2024 pm 10:10 PM

B站（哔哩哔哩）作为中国年轻人非常喜欢的视频分享网站，吸引了大量的用户。有些用户希望拥有两个B站账号，以便于分开管理和使用。那么，一个手机号怎么注册两个B站号呢？本文将围绕这一问题以及如何解除手机绑定展开讲解。一、一个手机号怎么注册两个B站号？1.注册新账号：首先，在手机上打开B站App或登录官网，点击“注册”按钮，选择注册方式，可以使用手机号码、邮箱或第三方账号（如微信、QQ等）进行注册。2.注册账号时，请根据系统提示填写必要的信息，包括手机号码、验证码以及设置密码等。务必确保两个账号使用不同

视频号矩阵账号怎么注册？怎么建立自己的视频号？ Mar 22, 2024 am 10:42 AM

随着微信视频号的推出，越来越多的人看到了新的流量机遇，因此，注册视频号矩阵账号成为了许多创作者和商家关注的焦点。那么，视频号矩阵账号怎么注册呢？如何建立自己的视频号呢？本文将详细解答这两个问题。一、视频号矩阵账号怎么注册？1.微信账号：首先，你需要有一个微信账号。如果没有，请先注册一个。2.开通视频号：在微信APP中，找到“发现”页面，点击“视频号”进入视频号页面。3.创作者中心：在视频号页面下方，点击“创作者中心”按钮，进入创作者中心。4.注册视频号：在创作者中心页面，找到“注册视频号”选项，

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

See all articles

jQuery正则验证注册页面详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题