网站注册页面Demo及表单验证功能源码

原创 2015年07月09日 16:42:24

页面的构建简单地应用了bootstrap,通过js代码实现了注册表单的验证功能。代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>用户注册</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

        <!-- 用于适应不同设备 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- bootstrap 样式表 -->
        <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
        <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

        <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
        <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script type="text/javascript"> 
            var flag = {
                "email":false,
                "username":false,
                "nickname":false,
                "password":false,
            };

            $(function(){
                // email验证  
                $("#txtEmail").blur(function(){
                    var email = $(this).val();

                    var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/; 
                    if(!pattern.test(email)){
                        $("#email\\.info").html("Email格式不正确");
                        return;
                    }else{
                        $("#email\\.info").html("");
                        flag.email = true;
                    }

                    // 邮箱重复校验
                });

                $("#txtUserName").blur(function(){
                    // 用户名校验
                    var username = $(this).val();

                    // 校验规则,可调整
                    var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
                    if(!pattern.test(username)){
                        $("#username\\.info").html("用户名不合法");
                        return;
                    }else{
                        $("#username\\.info").html("");
                        flag.username = true;
                    }
                });

                $("#txtNickName").blur(function(){
                    // 昵称校验
                    var nickname = $(this).val();

                    // 校验规则,可调整
                    var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
                    if(!pattern.test(nickname)){
                        $("#nickname\\.info").html("昵称不合法");
                        return;
                    }else{
                        $("#nickname\\.info").html("");
                        flag.nickname = true;
                        return;
                    }
                });

                // 密码校验
                $("#txtPassword").blur(function(){
                    var password=$(this).val(); 

                    var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/; 
                    if (!pattern.test(password)) { 
                        $("#password\\.info").html("密码格式不正确"); 
                        return;    
                    }else{ 
                        $("#password\\.info").html(""); 
                        //flag.password=true; 
                        return; 
                    } 
                });


                // 密码重复校验
                $("#txtRepeatPass").blur(function(){
                    var repeatPass = $(this).val();

                    var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/; 
                    if (repeatPass!=$("#txtPassword").val()) { 
                        $("#repeatPass\\.info").html("两次密码输入不一致"); 
                        return;
                    }else{
                        $("#repeatPass\\.info").html(""); 
                        flag.password = true;
                        return;
                    }
                });

                $("#form").submit(function(){
                    var ok = flag.email&&flag.password&&flag.nickname;
                    if(ok==false){
                        alert("表单项正在检测或存在错误");
                        history.back();
                        return false;
                    }
                    return true;
                });

            })
        </script> 
    </head>

    <body style="padding-top:50px;">
   <form class="form-horizontal" role="form" method="post" id="form">
   <div class="form-group">
      <label for="uname" class="col-sm-2 control-label">用户名</label>
      <div class="col-sm-6">
         <input type="text" class="form-control" id="txtUserName" name="username"
            placeholder="请输入用户名" required>
          <span id="username.info" style="color:red"></span>
      </div>
   </div>

   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">注册邮箱</label>
      <div class="col-sm-6">
         <input name="email" type="text" class="form-control" id="txtEmail" 
            placeholder="请输入注册邮箱" required>
          <span id="email.info" style="color:red"></span> 
      </div>
   </div>

   <div class="form-group">
       <label for="nickname" class="col-sm-2 control-label">昵称</label>  
       <div class="col-sm-6">
          <input type="text" class="form-control" name="nickname" id="txtNickName"
            placeholder="请输入昵称" required>
           <span id="nickname.info" style="color:red"></span> 
       </div>
   </div>

   <div class="form-group">
       <label for="passwd" class="col-sm-2 control-label">密码</label>  
       <div class="col-sm-6">
          <input type="password" class="form-control" name="password" id="txtPassword"
            placeholder="请输入密码" required>
           <span id="password.info" style="color:red"></span> 
       </div>
   </div>

   <div class="form-group">
       <label for="repeatPass" class="col-sm-2 control-label">重复密码</label>  
       <div class="col-sm-6">
          <input type="password" class="form-control" name="repeatPass" id="txtRepeatPass"
            placeholder="请再次输入密码" required>
           <span id="repeatPass.info" style="color:red"></span> 
       </div>
   </div>

   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-primary">注册</button>
      </div>
   </div>
</form>
    </body>
</html>

HTML注册页面代码

HTML注册页面代码       Untitled Document    function checkname(){  var div = document.getElementB...
  • huo_bao
  • huo_bao
  • 2015年11月11日 15:50
  • 13695

表单验证(登录/注册)

登录,注册是我们使用的较多的表单认证,每个项目都从头开始写,显然是没有必要的。下面和大家分享下我所写的表单验证: 下面的代码,会附上完整代码,使用的过程中,只需要根据自己的项目进行简单的修改即可,非常...
  • liuyan19891230
  • liuyan19891230
  • 2015年12月30日 14:15
  • 20236

典型注册页面JSP实现

这篇文章主要是用Servlet技术来实现,看了下面的源代码,很容易看出,很烦,尤其是往客户端写东西的时候。你可能会说,那用JSP好了,是这样的吗?                          ...
  • code_7
  • code_7
  • 2015年06月19日 20:15
  • 9952

注册页面demo

  • 2014年07月27日 18:32
  • 6.91MB
  • 下载

java web (登陆注册界面)

--java的代码部分 package com.demo.db.utils; import java.sql.Connection; import java.sql.DriverMana...
  • Blake01
  • Blake01
  • 2015年09月19日 19:57
  • 1363

用户注册页面以及源代码

  • 2011年06月07日 09:24
  • 78B
  • 下载

bootstrap做登录注册页面带验证

  • 2015年12月15日 18:26
  • 32KB
  • 下载

简单的留言页面表单验证代码,包括邮箱验证

您的姓名: * E-mail: 联系电话: * QQ/MSN: ...
  • u010257252
  • u010257252
  • 2017年03月11日 23:10
  • 648

jq登录表单验证

每个项目中都会有登录注册模块的一些验证。比如说:用户名我们要验证位数和是否符合用户名规则;密码要验证字母开头,长度,是否包含下划线等等,这里我总结了一下常用的验证规则,用的是项目中用到的class和i...
  • bini000
  • bini000
  • 2016年07月19日 09:30
  • 1621

js登录特效+ajax提交表单+异步刷新验证

今天成功测试一种js登录特效+ajax提交表单+异步刷新验证,登录时特效提醒,无刷新ajax提交表单,获取验证结果,跳转正式页面:废话不多说,先直接分享代码: 1、主界面index.php  加载的...
  • hpugym
  • hpugym
  • 2016年01月08日 16:45
  • 2682
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网站注册页面Demo及表单验证功能源码
举报原因:
原因补充:

(最多只允许输入30个字)