第9章 课后作业

其他 2018-09-01 11:17:14 阅读次数: 0

第3题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度注册页面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 12px;
            line-height: 25px;
        }

        .register {
            float: none;
            width: 503px;
            clear: both;
            margin: 0px auto;
        }

        .register dl {
            clear: both;
        }

        .register dt {
            width: 120px;
            text-align: right;
            padding-right: 5px;
            float: left;
        }

        .inputs {
            border: 1px solid #333;
            width: 120px;
            height: 20px;;
        }

        .register dl dd div {
            color: #ff0000;
            padding-left: 5px;
            display: inline;
        }

        .btn {
            width: 60px;
            text-align: center;
            height: 26px;
            margin: 5px 5px 0 0;
        }
    </style>
</head>

<body>
<div class="register">
    <div class="center"><img src="images/header1.jpg"/></div>
    <form action="success.html" method="post" id="myform">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" class="inputs"/>
                <div id="userId"></div>
            </dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd><input id="pwd" type="password" class="inputs"/>
                <div id="pwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd><input id="repwd" type="password" class="inputs"/>
                <div id="repwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>性别：</dt>
            <dd><input name="sex" type="radio" value="男"/>男 <input name="sex" type="radio" value="女"/>女
                <div id="sexId"></div>
            </dd>
        </dl>
        <dl>
            <dt>电子邮件：</dt>
            <dd><input id="email" type="text" class="inputs"/>
                <div id="emailId"></div>
            </dd>
        </dl>
        <dl>
            <dt>出生日期：</dt>
            <dd><select id="year">
                <script>
                    for (var i = 1900; i <= 2015; i++) {
                        document.write("<option value=" + i + ">" + i + "</option>");
                    }
                </script>
            </select>年
                <select id="month">
                    <script>
                        for (var i = 1; i <= 12; i++) {
                            document.write("<option value=" + i + ">" + i + "</option>");
                        }
                    </script>
                </select>月
                <select id="day">
                    <script>
                        for (var i = 1; i <= 31; i++) {
                            document.write("<option value=" + i + ">" + i + "</option>");
                        }
                    </script>
                </select>日
            </dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="sub" type="submit" value="注册" class="btn"/> <input name="cancel" type="reset" value="清除"
                                                                                class="btn"/></dd>
        </dl>
    </form>
</div>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $("#user").blur(uservalid);
        $("#pwd").blur(pwdvalid)
        $("#repwd").blur(repwdvalid)
        $("#email").focus(sexvalid)
        $("#email").blur(mailvalid)

        $("#myform").submit(function () {
            var flag = true;
            if (!uservalid()){ flag = false;}
            if (!pwdvalid()){ flag = false;}
            if (!repwdvalid()) {flag = false;}
            if (!sexvalid()) {flag = false;}
            if (!mailvalid()) {flag = false;}
            return flag;
        })
    })
    // 验证用户名
    function uservalid() {
        var user = $("#user").val();
        if (user == "") {
            $("#userId").html("用户名不能为空")
            return false
        } else if (user.length < 4 || user.length > 12) {
            $("#userId").html("用户名长度为4-12个字符")
            return false
        } else {
            for (var i = 0; i < user.length; i++) {
                var char = user.substring(i, i + 1)
                if (!(char >= '0' && char <= '9')
                    && !(char >= 'a' && char <= 'z')
                    && !(char >= 'A' && char <= 'Z')
                    && !(char == '_')) {
                    $("#userId").html("用户名必须由字母,数字和下划线组成")
                    return false
                } else {
                    $("#userId").html("")
                }
            }
        }
        return true
    }
    // 验证密码
    function pwdvalid() {
        var pwd = $("#pwd").val();
        if (pwd == "") {
            $("#pwdId").html("密码不能为空")
            return false
        } else if (pwd.length < 6 || pwd.length > 12) {
            $("#pwdId").html("密码长度为6-12个字符")
            return false
        } else {
            $("#pwdId").html("")
        }
        return true
    }
    // 验证重复密码
    function repwdvalid() {
        var pwd = $("#pwd").val();
        var repwd = $("#repwd").val();
        if (pwd != repwd) {
            $("#repwdId").html("两次输入的密码不一致")
            return false
        } else {
            $("#repwdId").html("")
        }
        return true
    }
    // 验证性别
    $("#myform :radio").focus(function () {
        $("#sexId").html("")
    })
    function sexvalid() {
        var sex = $("#myform :checked").val()
        if (sex != "男" && sex != "女") {
            $("#sexId").html("请选择性别")
            return false
        } else {
            $("#sexId").html("")
        }
        return true
    }
    //验证邮箱
    function mailvalid() {
        var mail = $("#email").val()
        if (mail == "") {
            $("#emailId").html("邮箱地址不能为空")
            return false
        }
        else if (mail.indexOf("@") == -1 || mail.indexOf(".") == -1) {
            $("#emailId").html("邮箱格式不正确")
            return false
        } else {
            $("#emailId").html("")
        }
        return true
    }
</script>
</body>
</html>

第4题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用正则表达式验证表单内容</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            line-height: 20px;
        }

        .main {
            width: 900px;
            margin: 0 auto;
        }

        .main dl {
            clear: both;
            height: 30px;
        }

        .main dl dt {
            text-align: right;
            float: left;
            width: 180px;
            height: 25px;
            padding-right: 5px;
        }

        .inputs {
            width: 130px;
            height: 16px;
            border: solid 1px #666666;
            float: left;
            margin-right: 5px;
        }

        .main dl dd div {
            display: inline;
            margin-left: 10px;
            color: #F00;
        }
    </style>
</head>

<body>
<div class="main"><img src="images/logo1.jpg" alt="logo"/>
    <form action="http://www.baidu.com" id="myform" method="post">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" class="inputs" onblur="checkUser()"/>
                <div id="user_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>Email地址：</dt>
            <dd><input id="email" type="text" class="inputs" onblur="checkEmail()"/>
                <div id="email_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>手机号码：</dt>
            <dd><input id="mobile" type="text" class="inputs" onblur="checkMobile()"/>
                <div id="mobile_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>登录密码：</dt>
            <dd><input id="pwd" type="password" class="inputs" onblur="checkPwd()"/>
                <div id="pwd_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>密码确认：</dt>
            <dd><input id="repwd" type="password" class="inputs" onblur="checkRepwd()"/>
                <div id="repwd_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="" type="image" src="images/login.jpg"/></dd>
        </dl>
    </form>
</div>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $("#myform").submit(function () {
            var flag = true;
            if (!checkUser()) {
                flag = false;
            }
            if (!checkPwd()) {
                flag = false;
            }
            if (!checkEmail()) {
                flag = false;
            }
            if (!checkMobile()) {
                flag = false;
            }
            if (!checkRepwd()) {
                flag = false;
            }
            return flag;
        })
    })

    // 验证用户名
    function checkUser() {
        var uPattern = /^[a-zA-Z]\w{4,15}$/;
        var user = $("#user").val();
        if (user == "") {
            $("#user_prompt").html("用户名不能为空")
            return false
        } else if (user.length < 5 || user.length > 16) {
            $("#user_prompt").html("用户名长度为5-16个字符")
            return false
        } else if (uPattern.test(user) == false) {
            $("#user_prompt").html("首位为字母的5-16个字母,数字,下划线")
            return false
        } else {
            $("#user_prompt").html("")
        }return true
    }
    //验证手机号码
    function checkMobile() {
        var mPattern = /^[1]\d{10}$/;
        var mobile = $("#mobile").val()
        if (mPattern.test(mobile)==false){
            $("#mobile_prompt").html("手机号码不符合要求")
        }else {
            $("#user_prompt").html("")
        }
    }
    // 验证密码
    function checkPwd() {
        var pPattern=/^.*(?=.{4,10})(?=.*\d)(?=.*[A-Za-z]).*$/;
        var pwd = $("#pwd").val();
        if (pwd == "") {
            $("#pwd_prompt").html("密码不能为空")
            return false
        } else if (pwd.length < 4 || pwd.length > 10) {
            $("#pwd_prompt").html("密码长度为4-10个字符")
            return false
        }else if (pPattern.test(pwd)==false) {
            $("#pwd_prompt").html("密码包含字母和数字")
            return false
        } else {
            $("#pwd_prompt").html("")
        }
        return true
    }

    // 验证重复密码
    function checkRepwd() {
        var pwd = $("#pwd").val();
        var repwd = $("#repwd").val();
        if (pwd != repwd) {
            $("#repwd_prompt").html("两次输入的密码不一致")
            return false
        } else {
            $("#repwd_prompt").html("")
        }
        return true
    }

    //验证邮箱
    function checkEmail() {
        var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        var mail = $("#email").val()
        if (mail == "") {
            $("#email_prompt").html("邮箱地址不能为空")
            return false
        }
        else if (ePattern.test(mail)==false) {
            $("#email_prompt").html("Email格式不正确,例如:[email protected]")
            return false
        } else {
            $("#email_prompt").html("")
        }
        return true
    }
</script>
</body>
</html>

第5题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作注册验证</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:12px;
            line-height:25px;
        }
        .main{
            width:470px;
            margin: 0 auto;
        }

        .main dl{clear: both; height: 30px;}
        .main dl dt{
            text-align:right;
            float: left;
            width:100px;
            height:25px;
            padding-right:5px;
        }
        .inputs{
            width:100px;
            height:16px;
            border:solid 1px #666666;
            float:left;
            margin-right:5px;
        }
        .main dl dd div{
            display: inline;
            margin-left:10px;
            color:#F00;
        }
    </style>
</head>

<body>
<div class="main"><img src="images/top1.jpg"  alt="top"/>
    <form action="" method="post" id="myform">
        <dl>
            <dt class="left">用户名：</dt>
            <dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" /><div id="user_prompt" class="prompt"></div></dd>
        </dl>
        <dl>
            <dt class="left">密码：</dt>
            <dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" onfocus="showPwd()" />
                <div id="pwd_prompt" class="prompt"></div></dd>
        </dl>
        <dl>
            <dt class="left">&nbsp;</dt>
            <dd><input name="" type="image" src="images/sumbit_btn.jpg" /></dd>
        </dl>
    </form>
</div>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $("#myform").submit(function () {
            var flag = true;
            if (!checkUser()) {
                flag = false;
            }
            if (!checkPwd()) {
                flag = false;
            }
            return flag
        })
    })
    function showUser(){
        $("#user_prompt").html("首位为字母的4-16个字母,数字,下划线")
    }
    function showPwd(){
        $("#pwd_prompt").html("4-10个字母和下划线")
    }
    function checkUser() {
        var uPattern = /^[a-zA-Z]\w{3,15}$/;
        var user = $("#user").val();
        if (uPattern.test(user) == false) {
            $("#user_prompt").html("用户名不正确")
            return false
        } else {
            $("#user_prompt").html("")
        }return true
    }
    function checkPwd(){
        var pPattern=/^[a-zA-Z_]{4,10}$/;
        var pwd = $("#pwd").val();
        if (pPattern.test(pwd)==false) {
            $("#pwd_prompt").html("密码不正确")
            return false
        } else {
            $("#pwd_prompt").html("")
        }
        return true
    }
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_41880408/article/details/81208460
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022