iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >jQuery中正则验证注册页面的示例分析
  • 596
分享到

jQuery中正则验证注册页面的示例分析

2024-04-02 19:04:59 596人浏览 泡泡鱼
摘要

这篇文章给大家分享的是有关Jquery中正则验证注册页面的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:<!DOCTYPE html> &

这篇文章给大家分享的是有关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 divId(elementId){
      return document.getElementById(elementId);
    }
//    用户名验证
    function checkUser(){
      var user = $("user");
      var userId = divId("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 = divId("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 = divId("repwd_prompt");
        repwdId.innerHTML=""
       if(pwd!=repwd){
         repwdId.innerHTML="两次密码不一致";
         return false;
       }
       return true;
     }
//   邮箱验证
    function checkEmail(){
      var email = $("email");
      var email_prompt = divId("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 = divId("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 = divId("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 ></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><div id="user_prompt">用户名由英文字母和数字组成-4到16位字符,以字母开头</div></td>
       </tr>
       <tr>
         <td class="left">密码:</td>
         <td class="center"><input type="password" id="pwd" class="in" onblur="checkPwd()"></td>
         <td><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></td>
       </tr>
       <tr>
         <td class="left">确认密码:</td>
         <td class="center"><input type="password" id="repwd" class="in" onblur="checkRepwd()"></td>
         <td><div id="repwd_prompt"></div></td>
       </tr>
       <tr>
         <td class="left">电子邮箱:</td>
         <td class="center"><input type="text" id="email" class="in" onblur="checkEmail()"></td>
         <td><div id="email_prompt"></div></td>
       </tr>
       <tr>
         <td class="left">手机号码:</td>
         <td class="center"><input type="text" id="mobile" class="in" onblur="checkMobile()"></td>
         <td><div id="mobile_prompt"></div></td>
       </tr>
       <tr>
         <td class="left">生日:</td>
         <td class="center"><input type="text " id="birth" class="in" onblur="checkBirth()"></td>
         <td><div id="birth_prompt"></div></td>
       </tr>
       <tr>
         <td class="left">&nbsp;</td>
         <td class="center"><input name="" type="image" src="images/reGISter.jpg" /></td>
         <td>&nbsp;</td>
       </tr>
     </table>
     </td>
  </tr>
  </form>
</table>
</body>
</html>

感谢各位的阅读!关于“jQuery中正则验证注册页面的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: jQuery中正则验证注册页面的示例分析

本文链接: https://www.lsjlt.com/news/78349.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery中正则验证注册页面的示例分析
    这篇文章给大家分享的是有关jQuery中正则验证注册页面的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:<!DOCTYPE html> &...
    99+
    2024-04-02
  • jQuery怎么实现注册正则表单验证
    使用jQuery实现注册正则表单验证的步骤如下:1. 添加jQuery库文件到HTML页面中:```html```2. 编写HTML...
    99+
    2023-08-11
    jQuery
  • Jquery中Easyui验证扩展的示例分析
    这篇文章主要为大家展示了“Jquery中Easyui验证扩展的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Jquery中Easyui验证扩展的示例分析...
    99+
    2024-04-02
  • JS正则表达式验证密码格式的示例分析
    这篇文章将为大家详细讲解有关JS正则表达式验证密码格式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 1.密码必须为6-18位字母、数字、特殊符号的:...
    99+
    2024-04-02
  • Vue简易注册页面+发送验证码功能的实现示例
    目录1. 效果展示2. 增强版验证码及邮件推送管理(见以后的博客)3. 大致思路4. 前期准备5. 前端代码6. 后端1. 效果展示 2. 增强版验证码及邮件推送管理(见以后的博...
    99+
    2024-04-02
  • laravel中csrf验证的示例分析
    这篇文章主要介绍laravel中csrf验证的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!laravel csrf验证总结前言问题:laravel 在web路由下无论是表单提交啊 还是ajax请求啊 只要是...
    99+
    2023-06-14
  • Thinkphp5中验证器的示例分析
    小编给大家分享一下Thinkphp5中验证器的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!验证器的使用方法比较简单,主要是我们需要去先定义好验证规则,T...
    99+
    2023-06-15
  • jQuery中Validate相关参数及常用自定义验证规则的示例分析
    这篇文章将为大家详细讲解有关jQuery中Validate相关参数及常用自定义验证规则的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Jquery Validat...
    99+
    2024-04-02
  • ES6中正则扩展的示例分析
    这篇文章将为大家详细讲解有关ES6中正则扩展的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:1. RegExp构造函数ES5中,RegExp构造函数的参...
    99+
    2024-04-02
  • element-ui中form验证的示例分析
    这篇文章主要介绍了element-ui中form验证的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。当我们添加required验证后...
    99+
    2024-04-02
  • jQuery表单验证之密码确认的示例分析
    这篇文章给大家分享的是有关jQuery表单验证之密码确认的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。代码:<!DOCTYPE html> <...
    99+
    2024-04-02
  • Xamarin.FormsShell中页面的示例分析
    这篇文章主要为大家展示了“Xamarin.FormsShell中页面的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Xamarin.FormsShell中页面的示例分析”这篇文章吧。轻拍...
    99+
    2023-06-04
  • vue中登录注册的示例分析
    这篇文章主要介绍了vue中登录注册的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。步骤一1.安装脚手架:npm install vu...
    99+
    2024-04-02
  • shell中正则表达式的示例分析
    这篇文章给大家分享的是有关shell中正则表达式的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。正则表达式匹配中文字符的正则表达式:[u4e00-u9fa5]评注:匹配中...
    99+
    2024-04-02
  • C#中正则表达式的示例分析
    这篇文章将为大家详细讲解有关C#中正则表达式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。(1)“@”符号符下两ows表研究室的火热,当晨在“@”虽然并非C#正则表达式的“成员”,但是它经常与C...
    99+
    2023-06-18
  • Java中正则表达式的示例分析
    这篇文章主要介绍了Java中正则表达式的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现...
    99+
    2023-06-15
  • jQuery中EasyUI页面加载等待及页面等待层的示例分析
    这篇文章主要为大家展示了“jQuery中EasyUI页面加载等待及页面等待层的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery中EasyUI页...
    99+
    2024-04-02
  • js正则表达式验证时间格式xxxx-xx-xx形式的示例分析
    这篇文章主要介绍js正则表达式验证时间格式xxxx-xx-xx形式的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在项目中,我们经常会遇到时间问题,有时候是使用时间插件,让用...
    99+
    2024-04-02
  • jQuery中Validate插件ajax方式验证输入值的示例分析
    小编给大家分享一下jQuery中Validate插件ajax方式验证输入值的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    99+
    2024-04-02
  • VueJs组件中prop验证的示例分析
    小编给大家分享一下VueJs组件中prop验证的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!组件Vue.js引入的组件...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作