表单校验+事件

时间：2020-07-06 16:03:14 阅读：52 评论：0 收藏：0 [点我收藏+]

标签：sed NPU 指定位置验证鼠标 close javascrip 不为 src

表单校验：

　　技术分析：

　　　　确定事件：表单提交时 onsubmit

　　　　　　　　　文本框失去焦点时 onblur

　　　　编写元素

　　　　获取元素

　　　　　　document.getElementById("id值")

　　　　操作元素（获取元素值，操作标签体，操作标签的value属性）

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        用户名<input name="" value="tom" id="username" onfocus="getFocus()" onblur="loseFocus()"/><br />
        <span id="spanid"></span>
    </body>
</html>
<script>
    //得到焦点
    function getFocus(){
        //获取元素
        var user = document.getElementById("username");
        //alert(user.value);
        
        //给span填写文本框内容
        document.getElementById("spanid").innerHTML = user.value;
    }
    //时去焦点的时候将内容弹出
    function loseFocus(){
        //获取元素
        var user = document.getElementById("username");
        alert(user.value);
        document.getElementById("spanid").innerHTML = null;
    }
</script>

焦点事件

　　步骤分析：

　　　　1.编写表单

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="get" onsubmit="return checkForm()">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">会员注册</td>
                </tr>
                <tr>
                    <td width="20%">用户名:</td>
                    <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="password"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></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="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

表单

　　　　2.表单提交时，确定事件 onsubmit()

　　　　3.校验用户名和密码

　　　　4.获取用户名和密码的对象及值

　　　　5.判断内容，当为空时，获取相应的span元素

　　　　　　往span元素中显示错误信息

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        function getFocus(){
            var flag = true;
            //1.获取用户名和密码的value值
            var user = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
            
            //校验用户名
            if(user==null || user == ""){
                //若为空，在span中添加错误信息
                //获取span，设置错误信息
                document.getElementById("username_msg").innerHTML="<font color=‘red‘>用户名不为空</font>"
                flag = false;
            }else{
                //
                document.getElementById("username_msg").innerHTML="";
            }
            
            //校验密码
            if(pass==null || pass == ""){
                //若为空，在span中添加错误信息
                //获取span，设置错误信息
                document.getElementById("password_msg").innerHTML="<font color=‘red‘>密码不为空</font>"
                //若不满足，则flag=false
                flag = false;
            }else{
                document.getElementById("password_msg").innerHTML="";
            }
            return flag;
        }
        //方式1
        /*function loseFocus(){
            //获取username的value值
            var user = document.getElementById("username").value;
            //判断条件，若不满足，给出相应的span设置内容
            if(user==null || user == ""){
                document.getElementById("username_msg").innerHTML="<font color=‘red‘>用户名不为空</font>"
            }else{
                document.getElementById("username_msg").innerHTML="";
            }
        }*/ 
        //方式2
        function loseFocus(obj){
            var pass = obj;
            if(pass==null || pass == ""){
                document.getElementById("password_msg").innerHTML="<font color=‘red‘>用户名不为空</font>"
            }else{
                document.getElementById("password_msg").innerHTML="";
            }
        }
    </script>
    <body>
        <form action="#" method="get" onsubmit="return getFocus()">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">会员注册USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用户名:</td>
                    <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus()"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="password" onblur="loseFocus(this.value)"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></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="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

注意：

　　　在方法中 (function()) this 指代的是当前的元素（当前dom对象）

事件总结：

　　常见事件：

　　　　焦点事件

　　　　　　onfocus

　　　　　　onblur

　　　　表单事件

　　　　　　onsubmit

　　　　　　onchange 改变

　　　　页面加载事件：

　　　　　　onload

　　　　鼠标事件（掌握）

　　　　　　onclick

　　　　鼠标事件（了解）

　　　　　　ondblclick:双击

　　　　　　onmousedown:按下

　　　　　　onmouseup:弹起

　　　　　　onmousemove:移动

　　　　　　onmouseover：悬停

　　　　　　onmouseout:移出

　　　　键盘事件(理解)

　　　　　　onkeydown：按下

　　　　　　onkeyup：弹起

　　　　　　onkeypress:按住

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02, #e022 {
            border: 1px solid #000000;
              height: 200px;
             width: 200px;
        }
        
    </style>
    <script type="text/javascript">
        //页面卸载前
        window.onbeforeunload = function(){
            return "在玩一会吧？";
        }
        
        // 页面加载事件：当整个html页面加载成功调用
        window.onload = function(){
            // 文本框事件
            var e01 = document.getElementById("e01");
            e01.onfocus = function(){
                html("textMsg","文本框获得焦点：focus");
            }
            e01.onblur = function(){
                html("textMsg","文本框失去焦点：blur");
            }
            e01.onkeydown = function(){
                html("textMsg","键盘按下：keydown；");
            }
            e01.onkeypress = function(event){
                var event = event || window.event;
                append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
            }
            e01.onkeyup = function(){
                append("textMsg","键盘弹起：keyup；");
            }
            
            // 鼠标事件
            var e02 = document.getElementById("e02");
            e02.onmouseover = function(){
                html("divMsg","鼠标移上：mouseover");
            }
            e02.onmouseout = function(){
                html("divMsg","鼠标移出：mouseout");
            }
            e02.onmousedown = function(){
                html("divMsg","鼠标按下：mousedown");
            }
            e02.onmouseup = function(){
                html("divMsg","鼠标弹起：mouseup");
            }
            
            var e022 = document.getElementById("e022");
            e022.onmousemove = function(){
                var event = event || window.event;
            };
            
            
            // 按钮事件
            var e03 = document.getElementById("e03");
            e03.onclick = function () {
                html("buttonMsg","单击：click");
            };
            e03.ondblclick= function () {
                html("buttonMsg","双击：dblclick");
            };
            
        };
        
        /**
         * 指定位置显示指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function html(objId,text){
            document.getElementById(objId).innerHTML = text;
        }
        /**
         * 指定位置追加指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function append(objId,text){
            document.getElementById(objId).innerHTML += text;
        }
        
    </script>
    
</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span>
    <hr/>
    <div id="e022" ></div><span id="divMsg2"></span>
    <hr/>
    <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>

表单校验+事件

标签：sed NPU 指定位置验证鼠标 close javascrip 不为 src

原文地址：https://www.cnblogs.com/yisennnn/p/13255068.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行