表单效验 第九章

编程语言 2018-07-31 14:09:48 阅读次数: 0

第一章

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度注册页面</title>
    <style type="text/css">
        *{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="第一题尾页.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="女" />女&nbsp;&nbsp;请选择性别
                <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 src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //绑定失去焦点事件
        $("#user").blur(checkUserId);
        $("#pwd").blur(checkPwdId);
        $("#repwd").blur(checkRePassId);
        $("#email").blur(checkEmailId);
        //提交表单,调用验证函数
        $("#myform").submit(function () {
            var flag = true;
            if (!checkUserId()) flag = false;
            if (!checkPwdId()) flag = false;
            if (!checkRePassId()) flag = false;
            if (!checkEmailId()) flag = false;
            return flag;
        })
    })
        //验证用户名
        function checkUserId() {
            var $user = $("#user");
            var $divID = $("#userId");
            var RegExp =/^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{6,12}$/;
            $divID.html("");
            if ($user.val() == "") {
                $divID.html("用户名不能为空");
                return false;
            }
            if (RegExp.test($user) == false){
               $("#userId").html("用户名必须由字母，数字和下划线组成");
                return false;
            }
            $("#userId").html("");
            return true;
        }
            //验证输入密码
            function checkPwdId() {
                var $pwd = $("#pwd");
                var $divID = $("#pwdId");
                var RegExp =  /^[\w]{8,12}$/;
                $divID.html("");
                if ($pwd.val() == "") {
                    $divID.html("密码不能为空");
                    return false;
                }
                if ($pwd.val().length < 6 || length > 12) {
                    $divID.html("密码必须等于或大于6个字符并且小于12个字符");
                    return false;
                }
                return true;
            }
            //验证重复密码
            function checkRePassId() {
                var $pwd = $("#pwd"); //输入密码
                var $repwd = $("#repwd");  //再次输入密码
                var $divID = $("#repassId");
                $divID.html("");
                if ($pwd.val() != $repwd.val()) {
                    $divID.html("两次输入的密码不一致");
                    return false;
                }
                return true;
            }
            //验证Email
            function checkEmailId() {
                var $email = $("#email");
                var $divID = $("#emailId");
                $divID.html("");
                if ($email.val() == "") {
                    $divID.html("Email不能为空");
                    return false;
                }
                if ($email.val().indexOf("@") == -1) {
                    $divID.html("Email格式不正确，必须包含@");
                    return false;
                }
                if ($email.val().indexOf(".") == -1) {
                    $divID.html("Email格式不正确，必须包含.");
                    return false;
                }
                return true;
            }
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册成功</title>
    <style type="text/css">
        body{ margin:0;
            text-align:center;
            font-size:24px;
            font-weight:bold;}
    </style>
</head>

<body>
<img src="images/top.jpg" /><br />
欢迎您注册成为百度用户!
</body>
</html>

第二章

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用正则表达式验证表单内容</title>
    <style type="text/css">
        *{
            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="logo.jpg" alt="logo"/>
    <form action="" 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 src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        /*用户名验证*/
        $("#user").blur(function () {
            var user = $(this).val();
            var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
            if (reg.test(user) == false) {
                $("#user_prompt").html("用户名不正确");
                return false;
            }
            $("#user_prompt").html("");
            return true;
        })
        /*验证邮箱*/
        $("#email").blur(function () {
            var email = $(this).val();
            var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
            if (reg.test(email) == false) {
                $("#email_prompt").html("Email格式不正确，例如[email protected]");
                return false;
            }
            $("#email_prompt").html("");
            return true;
        })
        /*验证手机号码*/
        $("#mobile").blur(function () {
            var mobile = $(this).val();
            var regMobile = /^1[3|4|5|7|8][0-9]{9}$/;
            if (regMobile.test(mobile) == false) {
                $("#mobile_prompt").html("手机号码不正确，请重新输入");
                return false;
            }
            $("#mobile_prompt").html("");
            return true;
        })
        /*密码验证*/
        $("#pwd").blur(function () {
            var pwd = $(this).val();
            var reg = /^[a-zA-Z0-9]{4,10}$/;
            if (reg.test(pwd) == false) {
                $("#pwd_prompt").html("密码不能含有非法字符，长度在4-10之间");
                return false;
            }
            $("#pwd_prompt").html("");
            return true;
        })
        $("#repwd").blur(function () {
            var repwd = $("#repwd").val();
            var pwd = $("#pwd").val();
            if (pwd != repwd) {
                $("#repwd_prompt").html("两次输入的密码不一致");
                return false;
            }
            $("#repwd_prompt").html("");
            return true;
        })
    })
</script>
</body>
</html>

第三题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作注册验证</title>
    <style type="text/css">
        *{
            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/top.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">首位为字母的 4-16个数字，字母，下划线</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 src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    /*用户名验证*/
    $("#user").blur(function () {
        var user = $(this).val();
        var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
        if (reg.test(user) == false) {
            $("#user_prompt").html("用户名不正确");
            return false;
        }
        $("#user_prompt").html("");
        return true;
    })
    /*密码验证*/
    $("#pwd").blur(function () {
        var pwd = $(this).val();
        var reg = /^[a-zA-Z]{4,10}$/;
        if (reg.test(pwd) == false) {
            $("#pwd_prompt").html("密码要求4-10个字母和下划线");
            return false;
        }
        $("#pwd_prompt").html("");
        return true;
    })
})
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/liyanghahahhaha/article/details/81288023
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022