WebApp新手创作--注册页面

最新推荐文章于 2021-06-03 03:48:19 发布

萌萌的冰淇淋

最新推荐文章于 2021-06-03 03:48:19 发布

阅读量880

点赞数 1

本文链接：https://blog.csdn.net/u012112094/article/details/50467023

版权

1 篇文章 0 订阅

订阅专栏

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

第一次写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" οnsubmit="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

收藏

觉得还不错? 一键收藏
0
评论
WebApp新手创作--注册页面

新手第一次写博客，也不熟悉一些格式等等，希望各位大神提出意见第一次写WebApp方面的页面，对于一些标签的理解性不强。特别是一些常见的手机号的输入的编写，不知道用哪个标签合适。以及验证码的一些接口~~~也不知道如何去调用。下面是HTML代码注册页面
复制链接

扫一扫