WebApp新手创作--注册页面

来源：互联网发布：pic单片机与51的区别编辑：程序博客网时间：2024/05/01 09:16

新手第一次写博客，也不熟悉一些格式等等，希望各位大神提出意见

第一次写WebApp方面的页面，对于一些标签的理解性不强。特别是一些常见的手机号的输入的编写，不知道用哪个标签合适。

以及验证码的一些接口~~~也不知道如何去调用。

注意点一：

在定义类似于“输入手机号码”+左边为“输入验证码”，则要运用定位i额，将input覆盖一部分

圆角问题也是需要单独设置

注意点二：

一般字体我们运用白色字体，会比黑色字体好看

注意点三：

响应式WebApp，在哪个平台上隐藏哪块部分，则添加.hidden-lg/md/sm/xs等

下面是HTML代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">    <title>注册页面</title>    <link href="css/bootstrap.css" rel="stylesheet">    <link rel="stylesheet" href="css/validator.css"/>    <script src="js/jquery-2.0.3.min.js"></script>    <script src="js/validator.js"></script></head><body>    <div class="navbar">        <div class="container">            <div class="row">                <div class="col-md-4 hidden-xs hidden-sm"></div>                <div class="col-md-4 col-sm-12 register">                    <div class="tip">                        <div class="text">注册即送现金抵扣券规则说明</div>                        <img src="img/img.jpg" alt=""/>                    </div>                    <form id="myform" name="myform" onsubmit="return formValidator();">                        <table>                            <tr>                                <td><input type="text" id="pnumber" placeholder="输入您的手机号码"></td>                                <td id="getValidator">获取验证码</td>                            </tr>                            <tr>                                <!-- 显示提示内容 -->                                <td><div id="pnumberTip"></div></td>                            </tr>                            <tr>                                <td colspan="2"><input type="text" id="number" placeholder="输入验证码"/></td>                            </tr>                            <tr>                                <td><div id="numberTip"></div></td>                            </tr>                            <tr>                                <td colspan="2"><input type="password" id="pwd" placeholder="输入密码"></td>                            </tr>                            <tr>                                <td><div id="pwdTip"></div></td>                            </tr>                            <tr>                                <td colspan="2"><input type="password" id="repwd" placeholder="确认密码"></td>                            </tr>                            <tr>                                <td><div id="repwdTip"></div></td>                            </tr>                            <tr>                                <td colspan="2"><input type="submit" id="submit" value="提交"></td>                            </tr>                        </table>                    </form>                </div>                <div class="col-md-4 hidden-xs hidden-sm"></div>            </div>        </div>    </div></body></html>

下面是JS代码

function pnumberValidator(){    //定义正则表达式    var regExp=/^[0-9]{11}$/;    var $myval=$("#pnumber").val();    //a.不能为空    if($myval==""||$myval==null){        $("#pnumberTip").text("手机号不能为空").css({            "color":"red",            "font-weight":"bold"        });        return false;    }    //b.长度为11位的有效手机号    else if(!regExp.test($myval)){        $("#pnumberTip").text("手机号输入错误").css({            "color":"red",            "font-weight":"bold"        });        return false;    }    //输入正确    else{        $("#pnumberTip").text("手机号输入正确").css({            "color":"#ffccff",            "font-weight":"bold"        });        return true;    }}function numberValidator(){    //a.验证码不能为空    var $number=$("#number").val();    if($number==""||$number==null){        $("#number").text("验证码不能为空").css({            "color":"red",            "font-weight":"bold"        });        return false;    }else if(!regExp.text($number)){        $("#number").text("验证码输入错误").css({            "color":"red",            "font-weight":"bold"        });        return false;    }else{        $("#pwdTip").text("密码输入正确").css({            "color":"#ffccff",            "font-weight":"bold"        });        return true;    }}function mypwdValidator(){    //a.密码不能为空    var $mypwd=$("#pwd").val();    var regExp=/^[a-zA-Z]{6,8}$/;    if($mypwd==""||$mypwd==null){        $("#pwdTip").text("密码不能为空").css({            "color":"red",            "font-weight":"bold"        });        return false;    }else if(!regExp.test($mypwd)){        $("#pwdTip").text("密码输入错误").css({            "color":"red",            "font-weight":"bold"        });        return false;    }else{        $("#pwdTip").text("密码输入正确").css({            "color":"#ffccff",            "font-weight":"bold"        });        return true;    }}function remypwdValidator(){    //a.密码不能为空    var $mypwd=$("#pwd").val();    var $remypwd=$("#repwd").val();    var regExp=/^[a-zA-Z]{6,8}$/;    if($remypwd==""||$remypwd==null){        $("#repwdTip").text("密码不能为空").css({            "color":"red",            "font-weight":"bold"        });        return false;    }else if(!regExp.test($remypwd)){        $("#repwdTip").text("密码输入错误").css({            "color":"red",            "font-weight":"bold"        });        return false;    }else if($remypwd!=$mypwd){        $("#repwdTip").text("密码输入错误").css({            "color":"red",            "font-weight":"bold"        });        return false;    }else{        $("#repwdTip").text("密码输入正确").css({            "color":"#ffccff",            "font-weight":"bold"        });        return true;    }}$(function(){    //1 手机号码验证    $("#pnumber").focus(function(){        $("#pnumberTip").text("请输入有效的手机号码").css({            "color" : "black",            "font-weight" : "normal"        });    }).blur(pnumberValidator);    //2 密码验证    $("#pwd").focus(function(){        $("#pwdTip").text("密码要求输入英文，且长度在6-8之间").css({            "color":"black",            "font-weight":"normal"        });    }).blur(mypwdValidator);    //3 密码验证    $("#pwd").focus(function(){        $("#pwdTip").text("密码要求输入英文，且长度在6-8之间").css({            "color":"black",            "font-weight":"normal"        });    }).blur(mypwdValidator);    $("#repwd").focus(function(){        $("#repwdTip").text("密码要求输入英文，且长度在6-8之间").css({            "color":"black",            "font-weight":"normal"        });    }).blur(mypwdValidator);    //3 密码验证    $("#repwd").focus(function(){        $("#repwdTip").text("密码要求输入英文，且长度在6-8之间").css({            "color":"black",            "font-weight":"normal"        });    }).blur(remypwdValidator);})    function formValidator(){        // 判断表单内所有元素验证全部通过        if(pnumberValidator()&&numberValidator()&&mypwdValidator()&&remypwdValidator()){            alert("表单验证成功!");            //return true;        }else{            alert("表单验证失败!");            //return false;        }}

下面是自己定义的一些CSS

input{    border:1px solid transparent;    border-color: #ccc;    border-radius: 4px;}div.navbar{    border:1px solid #000;    width:100%;    height:100%;}.row{    margin:0 auto;}.tip{    top:0;    left:0;    z-index:-2;}.text{    font-size:16px;    font-weight: bold;    color: #fff;    font-family: "Microsoft YaHei";    position: absolute;    top:0px;    margin-left:15px;    width:341px;    height:30px;    line-height:30px;    text-align:center;    background:#67b168;    left:0;    z-index:1;}form{    display:block;    margin-top:20px;    margin-left:20px;}#pnumber{    width:300px;    height:30px;    margin-bottom:20px;}#getValidator{    display: block;    width:105px;    height:30px;    text-align: center;    line-height:30px;    background: #67b168;}#number,#pwd,#repwd,#submit{    font-size:16px;    width:300px;    height:30px;    line-height:30px;    margin-bottom:20px;}#submit{    background: #67b168;    color: #fff;    font-weight: bold;}td>div{    width:200px;}#pnumber{    top:0;    left:0px;    z-index:-2;}#getValidator{    position:relative;    border-top-right-radius:4px;    border-bottom-right-radius: 4px;    top:0;    left:-105px;    z-index:1;    color:#fff;    font-weight: bold;}

1 0