其他分享
首页 > 其他分享> > js——2表单检验,onfocus,onblur,onkeyup用法

js——2表单检验,onfocus,onblur,onkeyup用法

作者:互联网

1onfocus,onblur,onkeyup用法介绍

2案例1一简单表单校验

3案例2一简单页面校验


1用法介绍

onblur:事件会在对象失去焦点时发生

onfocus:是onblur 相反事件 。

onkeyup: 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时。

案例:

<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','用户名长度不能小于6位')"  onkeyup="checkUsername() "/>

注:checkUsername()和showTips()为自定义函数


2案例1一简单表单校验

<!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>

 


 

3案例2一简单页面校验

(1)案例要点:

(2)案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            引入外部的js文件
        -->
        <script type="text/javascript" src="../js/regutils.js" ></script>
        <script>
            /*
                1. 确定事件 : onfocus
                2. 事件要驱动函数
                3. 函数要干一些事情: 修改span的内容
            */
            function showTips(spanID,msg){
                //首先要获得要操作元素 span
                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }
            /*
                校验用户名:
                1.事件: onblur  失去焦点
                onblur 表示失去焦点时触发
                onkeyup 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时。
                2.函数: checkUsername()
                3.函数去显示校验结果
            */
            function checkUsername(){
                //获取用户输入的内容
                var uValue = document.getElementById("username").value;
                //对输入的内容进行校验
                //获得要显示结果的span
                var span = document.getElementById("span_username");
                if(uValue.length < 6){
                    //显示校验结果
                    span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                    return true;
                }
            }
            
            /*
             密码校验
             */
            function checkPassword(){
                //获取密码输入
                var uPass = document.getElementById("password").value;
                
                var span = document.getElementById("span_password");
                
                //对密码输入进行校验
                if(uPass.length < 6){
                    span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
                    return true;
                }
            }
            
            /*
             确认密码校验
             * */
            function checkRePassword(){
                //获取密码输入
                var uPass = document.getElementById("password").value;
                
                //获取确认密码输入
                var uRePass = document.getElementById("repassword").value;
                
                
                var span = document.getElementById("span_repassword");
                
                //对密码输入进行校验
                if(uPass != uRePass){
                    span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
                    return false;
                }else{
                    span.innerHTML = "";
                    return true;
                }
            }
            
            /*
             校验邮箱
             * */
            function checkMail(){
                var umail = document.getElementById("email").value;
                
                var flag = checkEmail(umail);//????
                
                var span = document.getElementById("span_email");
                //对邮箱输入进行校验
                if(flag){
                    span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                    return true;
                }else{
                    span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
                    return false;
                }
            }
            
            function checkForm(){
                var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
                return flag;
            }
            
        </script>
    </head>
    <body>
        <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
            用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()"  /><span id="span_username"></span><br />
            密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
            确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
            邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
            手机号:<input type="text" id="text" /><br />
            
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

 


 

标签:onblur,span,校验,var,getElementById,onkeyup,return,onfocus,document
来源: https://www.cnblogs.com/wml2018/p/13052689.html