简单带验证的注册页面

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
    
        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/jquery.min.js"></script>
        <title>聪付注册页面</title>
        <style>
            @charset "utf-8";
            * {
                word-wrap: break-word;
            }
            
            html {
                -webkit-text-size-adjust: none;
            }
            
            
            
            body {
                font: normal 14px/24px "微软雅黑";
            }
            /*登录注册的头部*/
            
            #header {
                
                height: 111px;
            }
            .header_inner{width: 1181px; margin: auto;}
            .header_left {
                /*width: 525px;*/
                float: left;
            }
            
            .header_left img {
                float: right;
                margin-top: 21px;
            }
            
            .header_center {
                color: #525898;
                font-size: 24px;
                border-bottom: 1px solid #CCCCCC;
                float: left;
                margin-left: 59px;
                margin-top: 32px;
            }
            
            .header_center h3 {
                /*border-bottom: 1px solid #CCCCCC;*/
                background: url(img/login-01.png ) no-repeat bottom;
                
                line-height: 38px;
            }
            
            .header_right {
                /*width: 417px;*/
                float: left;
                margin-top: 27px;
                margin-left: 700px;
            }
            
        
            
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            body {
                font: 12px/1.5 Tahoma;
            }
            
            #background {
                height: 692px;
                background: url(img/login-background.png) no-repeat;
                background-size: cover;
                overflow: hidden;
            }
            
            #wrap {
                width: 600px;
                height: 470px;
                margin: 150px auto;
            }
            
            #tab {
                height: 60px;
                overflow: hidden;
                zoom: 1;
                background: #eeeeee;
                border: 3px solid #ccc;
            }
            
            #tab li {
                float: left;
                color: #666666;
                width: 297px;
                height: 60px;
                cursor: pointer;
                line-height: 54px;
                text-align: center;
                font-size: 22px;
                font-family: "微软雅黑";
            }
            #tab li  a{text-decoration: none; color: #000000;}
            
            /*#tab li.current {
                color: #000;
                background: #FFFFFF;
            }
            */
            #content {
                border: 3px solid #CCCCCC;
                border-top-width: 0;
                width: 595px;
                height: 415px;
                background: #FFFFFF;
                position: relative;
            }
            
            #content ul {
                line-height: 25px;
                display: none;
                margin: 0 30px;
                padding: 10px 0;
            }
            /*表单的样式==========================================================*/
            
            .form {
                width: 344px;
                height: 303px;
                margin: auto;
            }
            
            .form p {
                display: block;
                float: left;
                font-size: 13px;
            }
            
            .phone_num {
                margin-top: 45px;
            }
            
            .phone_num,
            .password_1,
            .again_p,
            .submit_1 {
                width: 338px;
                height: 45px;
                margin-bottom: 8px;
            }
            
            .yanzheng {
                width: 180px;
                height: 45px;
                margin-bottom: 8px;
            }
            /*验证码*/
            #btnSendCode{width: 154px; height: 48px;}
            #btnSendCodes{width: 154px; height: 48px;}
            /*#id{width:150px; height:45px; border: none;}*/
            
            .password_1 {}
            
            .password_2 {}
            
            .OK {
                float: left;
                margin-left: 85px;
                margin-top: 8px;
            }
            
            .submit_1 {
                background: #FFFFFF;
            }
            /*底部图标*/
            
            .iconfont {
                height: 184px;
                overflow: hidden;
            }
            
            .iconfont .inner_icon {
                width: 1196px;
                margin: auto;
            }
            
            .iconfont dl {
                width: 300px;
                float: left;
                margin-top: 63px;
                margin-left: 73px;
            }
            
            .iconfont dl dt {
                float: left;
                margin-right: 10px;
            }
            
            .iconfont dl dd {
                float: left;
                line-height: 24px;
            }
        /*footer*/
#footer_wrap{height:119px; background: #dddddd; }
 .footer_inner{width: 1106px; margin: auto;}
  .left{float: left; /*margin: 25px  10px  0  411px; */  margin-top: 25px; }
  .center{ float: left; font-size: 14px;  margin-top: 49px; margin-left: 20px; }
  .right{ float:left; margin-top: 51px;  margin-left: 208px;}
  .right a{ color: #000000; text-decoration: none;}

/*弹出*/
            .po_phone_num{display: none; color: #EC3E7D; position: absolute; right: -37px; top: 61px;}
            
            .po_password{display: none;color: #EC3E7D;position: absolute; right: -37px; top: 176px;}
            .po_again_p{display: none;color: #EC3E7D;position: absolute; right: -37px; top: 235px;}
            .form_act{display: none;color: #EC3E7D;}
            
        </style>
    </head>

<body>
        <div id="header">
            <div class="header_inner">
            <div class="header_left"><img src="img/header.png"></div>

<div class="header_center">
                <h3>可视温暖在身边</h3>
            </div>

<div class="header_right">

<img src="img/header2.png" >
            </div>
</div>
        </div>
        <!-- html代码begin -->
        <div id="background">

<div id="wrap">
                <ul id="tab">
                    <li style="color: #000;background: #FFFFFF;"><a href="personal-register.html">个人注册</a></li>
                    <li><a href="bussinessregister.html">商家注册</a></li>

</ul>
                <div id="content">
                    <!--个人注册-->
                    <ul style="display:block;">
                           <form class="form" action="personal-login.html">
                            
                               <input type="text" id="phone" name="tel"   placeholder="手机号"  class="phone_num"/>  
            <div class="po_phone_num">请输入正确的手机号码</div>
                                  <input type="text" id="checkCode" name="checkcode" size="6"  class="yanzheng"  placeholder="验证码"/>  
                                    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />  
          <div class="form_act">输入正确验证码</div>
                            <input type="password" placeholder="登录密码" class="password_1" />
            <div class="po_password">输入不正确，至少6个字符</div>
                            <input type="password" placeholder="确认密码" class="again_p" name="password"/>
            <div class="po_again_p">密码与确认密码不相符，请重新填写</div>

<input type="checkbox" class="OK" />
                            <p>同意《聪付服务协议》</p>
                          <input type="submit" value="下一步" class="submit_1"/>
                            
                        </form>
<!--<div class="po_phone_num">请输入正确的手机号码</div>
<div class="form_act">输入正确验证码</div>
<div class="po_password">输入不正确，至少6个字符</div>
<div class="po_again_p">密码与确认密码不相符，请重新填写</div>-->
                    </ul>

</div>
            </div>
        </div>

<!--三个图标的部分哦-->
        <!--底部图标-->
        <div class="iconfont">
            <div class="inner_icon">
                <dl>
                    <dt><img src="img/login_icon1.png" ></dt>
                    <dd style="margin-right: 120px;">可视支付，余额随时看</dd>
                    <dd>使用更安心</dd>
                </dl>

<dl>
                    <dt><img src="img/login_icon2.png" ></dt>
                    <dd style="margin-right: 120px;">数据分析，家人云查看</dd>
                    <dd>温暖在身边</dd>
                </dl>
                <dl>
                    <dt><img src="img/login_icon3.png" ></dt>
                    <dd style="margin-right: 120px;">商家入驻，审核优把关</dd>
                    <dd>使用更安全</dd>
                </dl>
            </div>
        </div>
        <!--加载尾部的内容-->
        <!--<div id="footer01"></div>-->
        <!--footer-->
        
        <div id="footer_wrap">
            <div class="footer_inner">
                 <div class="left"><img src="img/footer.png" /></div>
            <div class="center">
                <p>聪付版权所有：版权所有2016沪ICP证888888号2016聪付 使用聪付前必读聪付协议</p>
            </div>
            <div class="right">
                <a href="servicecenter.html">帮助中心|</a>
                <a href="tip.html">提建议</a>
            </div>
            </div>
        </div>

<script src="js/jquery.min.js"></script>
        <script type="text/javascript">  
/*-------------------------------------------*/  
var InterValObj; //timer变量，控制时间  
var count = 60; //间隔函数，1秒执行  
var curCount;//当前剩余秒数  
var code = ""; //验证码  
var codeLength = 6;//验证码长度  
function sendMessage() {  
    curCount = count;  
    var phone=$("#phone").val();//手机号码  
    if(phone != ""){  
        //设置button效果，开始计时  
        $("#btnSendCode").attr("disabled", "true");  
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
    //向后台发送处理数据  
        $.ajax({  
            type: "POST", //用POST方式传输  
            dataType: "text", //数据格式:JSON  
            url: ‘RegisterMessage.action‘, //目标地址  
            data: "phone=" + phone + "&code=" + code,  
            error: function (XMLHttpRequest, textStatus, errorThrown) { },  
            success: function (msg){ }  
        });  
    }else{  
        alert("手机号码不能为空！");  
    }  
}  
//timer处理函数  
 function SetRemainTime() {  
    if (curCount == 0) {                  
        window.clearInterval(InterValObj);//停止计时器  
        $("#btnSendCode").removeAttr("disabled");//启用按钮  
        $("#btnSendCode").val("重新发送验证码");  
        code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      
    }  
    else {  
        curCount--;  
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
    }  
}

</script>

</body>
<script>
    $(function(){
        var juddge01=juddge02=juddge03=juddge04 =juddge05= false;
        //1验证手机号
        $(".phone_num").blur(function(){
            //alert(1)
            var $phone_num = $(".phone_num").val();
            var reg02 = /^1[3|4|5|7|8]\d{9}$/;//手机号
            
            if(reg02.test($phone_num)){
            
            console.log("邮箱或者手机号正确");
            
            $(".po_phone_num").css("display","none");
            
            juddge01 = true;
        }else{
            
            $(".po_phone_num").css("display","block");
            
            juddge01 = false;
        }
            
        })
        
        //2.验证验证码
//        $(‘.yanzheng‘).blur(function(){
//            //alert(1)
//            
//            
//            
//            var $yanzheng  = $(".yanzheng").val();
//            
//            if(str == $yanzheng){
//                
//                console.log("验证码正确");
//                
//                juddge02=true;
//                
//                $(".form_act").css("display","none");
//            }else{
//                
//                
//                
//                $(".form_act").css("display","block");
//                
//                juddge02 = false;
//            }
//        })
//        
        
        
        
        
        
        
        //3验证密码
    $(".password_1").blur(function(){
          //alert(ok)
        var $password_1 = $(".password_1").val();

var reg03=/^\w{6,16}$/;
        
    
        
        if(reg03.test($password_1)){
            
            console.log("密码正确");
            
            juddge03 = true;
            
            $(".po_password").css("display","none");
        }else{
            
            $(".po_password").css("display","block");
            
            juddge03 = false;
        }
        
        
        })

})
        
    })
</script>
</html>

时间： 2024-08-01 17:47:40

简单带验证的注册页面的相关文章

表单验证制作注册页面

<body> <form action="好友列表.html" method="get"> <div> 用户名:<input type="text" name="name" id="name" /> </div> <div> 密码:<input type="text" name="mima1"

Android笔记-4-实现登陆页面并跳转和简单的注册页面

实现登陆页面并跳转和简单的注册页面 首先我们来看看布局的xml代码 login.xml <span style="font-family:Arial;font-size:18px;"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

HTML简单登录和注册页面及input标签诠释

今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标记语言.HTML 标签是由尖括号包围的关键词,比如 <html>.HTML 标签通常是成对出现的,比如 <b> 和 </b>: <html> 与 </html> 之间的文本描述网页: <body> 与 </body> 之间的文

关闭discuzX3.2注册页面的注册邮箱验证

论坛升级后发现注册用户在输入任何邮箱email时,一直提示email 地址无效.用firephp跟踪发现:随机生成的email的后缀是@localhost! 找到原因,修改如下: //原来代码 if(empty($email) && $_G['setting']['forgeemail']) { $_GET['email'] = $email = strtolower(random(6)).'@'.$_SERVER['HTTP_HOST']; } //但是如果本地调试emai后缀就是@lo

ajax注册页面异步验证

ajax的原理大家可以看上图 如何获得Ajax对象? XMLHttpRequest没有标准化,要区分浏览器.function getXhr(){var xhr = null;if(window.XMLHttpRequest){//非ie浏览器xhr = new XMLHttpRequest();}else{//ie浏览器xhr = new ActiveXObject('MicroSoft.XMLHttp');}return xhr;} 下面我把代码贴出来: 1.注册页面regist.jsp <%

javaweb实现注册页面（数据库连接以及ajax验证）

先放效果图 可实现js实时验证        可实现ajax实时验证注册信息是否存在   页面实现要求 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成.(1分) 3性别:要求用单选框或下拉框实现,选项只有“男”或“女”:(1分) 4学号:要求八位数字组成,前四位为“2018”开头,输入自己学号:(1分) 5姓名:输入自己的姓名: 5电子邮箱:要求判断正确格式[email protec

使用HTML和ASHX文件实现其简单的注册页面

记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序中一直在出错,大的问题小的问题一直出错,似乎是不在状态,但是练习还是要练习的,我并不怕出错,因为现在还是在学习的阶段,问题越多越好吧,但是不希望低级的错误屡次发生,既浪费自己的时间,也毫无意义:好啦,说太多就不高兴啦,保持好心情,开始我今天的博客之旅. 一.html页面 <script src="jquery-1.7.1.min.js"&

HTML注册页面验证注册信息

在这里主要介绍两种验证方式,一种是点击注册按钮后会提示最上方的出错位置,弹出窗口提示格式不对.另一种是利用鼠标事件,在鼠标进行不同操作时会有不同的click事件. 这两种都是利用javascript,同时也可以添加css美化界面. 第一种:首先建立一个form和一个table <form action="" method="post"> <table> <tr> <td>用户名</td> <td>

第十篇 编写一个简单的注册页面

一个简单的注册页面 今天的课程学习,我们来一波综合,将前面学到的东西,做一次小练习,我们自定义一个注册页面,不需要太华丽,能表达清楚意思就可以了. <!DOCTYPE html> <html> <head lang="en"> <!--支持中文字符集--> <meta charset="UTF-8"> <!--标题--> <title>注册</title> <!--