JavaScript第4课(黑马程序员)

本文参考黑马程序员视频讲座

案例四:注册页面表单校验完善

本案例在https://blog.csdn.net/ccnuacmhdu/article/details/80160757中案例一的基础上改善与完善。用户输入不合乎要求时,在输入框的右侧显示错误提示信息,而不是一直在整个网页中显示出一个窗口,还需要用户关闭这个弹出的窗口后才能重新输入信息。这样,方便了用户的使用体验。

实现效果:鼠标箭头靠近输入框时,提示灰色信息,未输入就离开输入框时提示红色信息。
JavaScript第4课(黑马程序员)_第1张图片

关键:用聚焦事件(onfocus)和离焦(onblur)事件及在特定位置写入用innerHTML

完整代码:


<html>

    <head>
        <meta charset="UTF-8">
        <title>网站注册页面title>
        

        <script>
            function show_tip(id,info){
//              在特定位置(下面是在user_span处)写入内容用innerHTML
                document.getElementById(id+"_span").innerHTML=""+info+"";
            }

            function check(id,info){
                var uValue=document.getElementById(id).value;
                if(uValue==""){
                    document.getElementById(id+"_span").innerHTML=""+info+""
                }
                else{
                    document.getElementById(id+"_span").innerHTML="";
                }
            }
        script>
    head>

    <body>
        <table border="1px" width="1300px" cellpadding="0px" cellspacing="0px" align="center">
            
            <tr>
                <td>
                    
                    <table border="1px" width="100%">
                        <tr height="50px">
                            <td width="33.3%">
                                <img src="../img/logo2.png" height="46px" />
                            td>
                            <td width="33.3%">
                                <img src="../img/header.png" / height="46px">
                            td>
                            <td>
                                <a href="#">登录a>
                                <a href="#">注册a>
                                <a href="#">购物车a>
                            td>
                        tr>
                    table>
                td>
            tr>
            
            <tr height="50px">
                <td bgcolor="black">
                    <a href="#">
                        <font size="5" color="white">首页font>
                    a>&nbs;
                    <a href="#">
                        <font color="white">手机数码font>
                    a>&nbs;
                    <a href="#">
                        <font color="white">电脑办公font>
                    a>&nbs;
                    <a href="#">
                        <font color="white">鞋靴箱包font>
                    a>&nbs;
                    <a href="#">
                        <font color="white">家用电器font>
                    a>&nbs;

                td>
            tr>
            
            <tr>
                <td height="600px" background="../img/regist_bg.jpg">
                    
                    <form action="#" method="get" name="Register_Form" onsubmit="return checkForm()">
                        <table border="1px" width="750px" height="360px" align="center" cellpadding="0px" cellspacing="0px">
                            <tr>
                                <td colspan="2">
                                    <font size="4">会员注册font> USER REGISTER
                                td>

                            tr>

                            <tr>
                                <td>用户名td>
                                <td>
                                    <input type="text" name="username" id="username" onfocus="show_tip('username','用户名必须填写!')" onblur="check('username','用户名必须填写!')"/><span id="username_span">span>
                                td>
                            tr>

                            <tr>
                                <td>密码td>
                                <td>
                                    <input type="password" name="password" id="password" onfocus="show_tip('password','密码必须填写!')" onblur="check('password','密码必须填写!')"/><span id="password_span">span>
                                td>
                            tr>

                            <tr>
                                <td>确认密码td>
                                <td>
                                    <input type="password" name="confirm_password" id="confirm_password" onfocus="show_tip('confirm_password','密码必须二次确认!')" onblur="check('confirm_password','密码必须二次确认!')"/><span id="confirm_password_span">span>
                                td>
                            tr>

                            <tr>
                                <td>Emailtd>
                                <td>
                                    <input type="text" name="Email" id="email"/>
                                td>
                            tr>

                            <tr>
                                <td>姓名td>
                                <td>
                                    <input type="text" name="name" />
                                td>
                            tr>

                            <tr>
                                <td>性别td>
                                <td>
                                    <input type="radio" name="sex" value="男" /><input type="radio" name="sex" value="女" />td>
                            tr>

                            <tr>
                                <td>出生日期td>
                                <td>
                                    <input type="text" name="birthday" />
                                td>
                            tr>

                            <tr>
                                <td>验证码td>
                                <td>
                                    <input type="text" name="验证码" />
                                    <img src="../img/yanzhengma.png" />
                                td>
                            tr>

                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                td>

                            tr>
                        table>
                    form>
                td>
            tr>
            
            tr>
            <td>
                <img src="../img/footer.jpg" width="100%" />
            td>
            tr>
            
            <tr>
                <td align="center">
                    <a href="#">关于我们a>
                    <a href="#">联系我们a>
                    <a href="#">招贤纳士a>
                    <a href="#">法律声明a>
                    <a href="#">友情链接a>
                    <a href="#">支付方式a>
                    <a href="#">配送方式a>
                    <a href="#">服务声明a>
                    <a href="#">广告声明a>
                    <p>
                        Copyright © 2005-2016 传智商城 版权所有
                    p>
                td>
            tr>
        table>
    body>

html>

你可能感兴趣的:(JavaScript)