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

最新推荐文章于 2024-03-07 09:27:08 发布

君莫_笑_

最新推荐文章于 2024-03-07 09:27:08 发布

阅读量6.4k

点赞数

分类专栏： Java Web 文章标签：注册页面网页源码表单验证 js html

本文链接：https://blog.csdn.net/u012801337/article/details/46818889

版权

Java Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

页面的构建简单地应用了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>

君莫_笑_

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
网站注册页面Demo及表单验证功能源码

页面的构建简单地应用了bootstrap，通过js代码实现了注册表单的验证功能。代码如下：<!DOCTYPE html><html> <head> <title>用户注册</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- 用于适应不
复制链接

扫一扫