JS开发步骤学习笔记

发布时间：2020-07-09 20:14:04 作者：知止内明
来源：网络阅读：273

确定事件
事件要触发函数: 定义函数
函数通常都要去做一些交互: 点击, 修改图片, 动态修改innerHTML属性可以编写代码... innerTEXT() 不能编写代码

表单校验中常用的事件:

获得焦点事件: onfocus

失去焦点事件  onblur

按键抬起事件:  onkeyup

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            确认事件
            事件触发函数
            函数操作元素

            校验用户名
                1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
                    事件: 焦点事件 onfocus
                    触发函数
                    函数里面要做一些事情
                        span 给用户提示信息

                2. 当用户鼠标移开时候, 校验一下用户输入
                    事件: 失去焦点  onblur
                    触发函数
                    函数要干事情:
                        校验用户输入
                        得到用户输入的值

                3. 当用户按键输入抬起的时候, 校验一下用户输入
        -->
        <script>

            function showTips(spanID,msg){
                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }

            function checkUsername(){

                /*
                 alert(this)  每一个函数中都隐藏着一个this指针, 指向的是当前事件触发对象 
                */
                var uValue = document.getElementById("username").value;
//              alert(uValue);
                var span = document.getElementById("span_username");
                if(uValue.length < 6){
                    span.innerHTML = "对不起,太短啦!"
                    return false;
                }else{
                    span.innerHTML = "恭喜您,够用!"
                    return true;
                }
            }

            function checkForm(){
                var flag = checkUsername();
                return flag;
            }

        </script>
    </head>
    <body>
        <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
            用户名:<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br />
            <input type="submit" value="注册" />
        </form>

    </body>
</html>

JS开发步骤学习笔记

相关阅读