0


前端进阶:JavaScript实现优雅遮罩层下的表单验证技巧

表单验证的高级特性

本次介绍的重点如下:

动态改变样式属性

className属性的用法

遮罩层特效的

制作动态输入的提示特性

  • 实现当文本框获得焦点时改变背景颜色,失去焦点时恢复白色
  • 使用元素的style属性访问样式规则 - object.style.property;
  • 例如:- 访问字体的颜色color使用obj.style.color- 访问字体的大小属性使用obj.style.fontSize- > font-size变换成fontSize> > 样式属性由多个单词组成时,须变换属性的书写格式

例1:onFocus获得焦点事件,onBlur失去焦点事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    <style type="text/css">
        .fStyle{
        border:2px solid red;
        background:#FFFF99;
        }
        .bStyle{
        border:1px solid blue;
        background:#fff;
        color:#CCCCCC;
        }        
    </style>
    </head>
    <body>
        用户名:<input name="username" type="text" class="bStyle" id="username" onFocus="focusStyle()"  onblur="blurStyle()"/>
        密码:<input name="password" type="password" id="password" />
    </body>
</html>

className属性的用法

  • className属性可以动态引用样式的类选择器
  • 语法:object.className= "className";
  • 在使用className属性须预先定义相应的类选择器(如定义文本框获得焦点和失去焦点的样式),然后再使用object.className在事件触发时引用相关样式的类选择符

例1完善:在函数中设置在文本框获得和失去焦点的类样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    <style type="text/css">
        .fStyle{
        border:2px solid red;
        background:#FFFF99;
        }
        .bStyle{
        border:1px solid blue;
        background:#fff;
        color:#CCCCCC;
        }        
    </style>
    </head>
    <body>
        用户名:<input name="username" type="text" class="bStyle" id="username" onFocus="focusStyle()"  onblur="blurStyle()"/>
        密码:<input name="password" type="password" id="password" />
    </body>
    <script type="text/javascript">
       function $(objName){
           return document.getElementById(objName); 
           }
       function focusStyle(){
            $("username").className="fStyle";
            if($("username").value=="请输入用户名"){
            $("username").value="";
            }
        }
        
       function blurStyle(){
            $("username").className="bStyle";
            if($("username").value==""){
            $("username").value="请输入用户名";
            }
       }
</script>

</html>

例3:可以在函数中直接访问样式属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        用户名:<input name="username" type="text" class="bStyle" id="username" onFocus="focusStyle()"  onblur="blurStyle()"/>
        密码:<input name="password" type="password" id="password" />
    </body>
    <script type="text/javascript">
       function $(objName){
           return document.getElementById(objName); 
           }
       function focusStyle(){
            $("username").style.border="2px solid red";
            $("username").style.backgroundColor="#FFFF99";
            if($("username").value=="请输入用户名"){
            $("username").value="";
            }
        }
        
       function blurStyle(){
            $("username").style.border="1px solid blue";
            $("username").style.backgroundColor="#fff";
            if($("username").value==""){
            $("username").value="请输入用户名";
            }
       }
</script>

</html>

制作登录时的遮罩层

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 去除所有标签的内外边距 */
            *{
                margin: 0px;
                padding: 0px;
            }
            /* 设置body的宽高,目的是为了可以滚动 */
            body{
                width: 2000px;
                height: 1200px;
            }
            #cover{
                /* 默认不显示 */
                display: none;
                background-color: #CCCCCC;
                /* 绝对定位 */
                position: absolute;
                top: 0px;
                left: 0px;
                /* 设置不透明度 ,不同浏览器的实现方式可能不同*/
                filter: alpha(opacity=50);
                opacity: 0.5 !important;
            }
            #logindiv{
                width: 300px;
                height: 200px;
                margin-left: 500px;
                background-color: white;
                position: relative;
                display: none;
                /* 上层显示,值越大,层越在上面 */
                z-index: 10; 
            }
        </style>
    </head>
    <body onload="init()">
        <!-- 可以自行设置页面效果 -->
        <h2>这里可以放置背景网页</h2>
        <input type="button" id="login" value="登录" onclick="show()" />
        <div id="cover"></div>  <!-- 遮罩层 -->
        <div id="logindiv">
        用户名:<input type="text" id="username" placeholder="请输入用户名" /><br />
        密码:<input type="text" id="password" placeholder="请输入密码"/><br />
        <input type="submit" value="提交" onclick="yincang()" />
        </div>
    </body>
    <script>
        function $(obj){
            return document.getElementById(obj);
        }
        function init() {
            /* 获得遮罩层 */
            var cover = $("cover");
            // 设置滚动鼠标时自动增加遮罩层宽高
            cover.style.width = document.documentElement.scrollWidth + "px";
            cover.style.height = document.documentElement.scrollHeight + "px";
            }
        
        function show() {
            // 块状显示
            $("cover").style.display = "block";
            $("logindiv").style.display = "block";
            }
                    
        function yincang(){
            //提交表单后,再次隐藏遮罩层和登录界面
            $("cover").style.display = "none";
            $("logindiv").style.display = "none";
        }
    </script>
</html>
  • 实现步骤一: - 页面中添加两个层标签(div),分别用作遮罩层和弹出层,设置两层的样式属性,遮罩层为半透明状,其z-index属性的值小于弹出层的z-index属性的值(z-index的值不做具体要求,但是谁的z-index值越大,谁出现在最上层)
  • 实现步骤二: - 编写初始化遮罩层和弹出层的大小及位置的脚本- 用到的属性: - scrollWidth:是对象的实际内容的宽,不包括边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)- clientWidth:是对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变- offsetWidth:是对象的可见宽度,包括滚动条等边线,会随窗口的显示大小改变- 实现步骤三: - 在页面加载事件onload中调用init方法,在登录链接中显示遮罩层,并处理弹出层的关闭操作
  • !important的用法 > > - IE和mozilla在解析部分CSS样式属性时有所不同。利用!important可以针对IE和非IE浏览器设置不同的样式> - !important 在非IE浏览器中能识别,而IE中则忽略使用!important 的css语法

附加内容:基于遮罩层实现省市级联的另一种思路(基于display属性)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
            margin:0;
            padding:0;
            }
            
            #cover{
                background:#CCCCCC;
                top:0;left:0;
                position:absolute;
                filter:alpha(opacity=60);
                opacity:0.6 !important;
                z-index:2;
            }
            #citydiv{
                border:1px solid #993333; 
                background:#FFFFFF;
                width:300px;
                height:250px;
                display:none;
                margin-left:100px;
                position:relative;
                z-index:10;
            }
            #closer{
                font-size:11px;
             position:absolute;
             margin-left:231px;
             }
        </style>
        </head>
        <script>
            function $(obj){
                return document.getElementById(obj);
            }
            
            function init(){
                var cover=$("cover");
                cover.style.width=document.documentElement.scrollWidth+"px";
                cover.style.height=document.documentElement.scrollHeight+"px";
                cover.style.display="none";

            }
            
            // 显示遮罩层和城市列表
            function show(){
                $("cover").style.display="block";
                $("citydiv").style.display="block";
                $("hn").style.display="none";
                $("hb").style.display="none";
            }
            
            
            //隐藏遮罩层
            function hide(){
                $("cover").style.display="none";
                $("citydiv").style.display="none";
                $("hn").style.display="none";
                $("hb").style.display="none";
                
            }
            
            //将选择的城市添加到文本框
            function subs(){
                
                var arr=document.getElementsByName("city");
                var str="";
                
                // $("position").value=" ";
                for(i=0;i<arr.length;i++){
                    if(arr[i].checked){
                        str+=arr[i].value+",";
                    }    
                }
                str=str.substr(0,str.length-1);        
                $("position").value=str;
                hide();    
                
            }
            
            function zicity(){
                var province=$("province").value;
                if(province==""){
                    cancel();
                    $("hb").style.display="none";
                    $("hn").style.display="none";
                    
                }else{
                    if(province=="hn"){
                        cancel();
                        $("hn").style.display="block";
                        $("hb").style.display="none"
                    }else{
                        cancel();
                        $("hb").style.display="block";
                        $("hn").style.display="none";
                    }
                }
            
            }
            function  cancel(){
                var arr=document.getElementsByName("city");
                for(i=0;i<arr.length;i++){
                    if(arr[i].checked){
                        arr[i].checked=false;
                    }    
                }
            }
            function defaultBtn(){
                    var province=$("province").value;
                    cancel();
                    if(province=="hn"){
                        $("hn1").checked=true;
                    }else{
                        $("hb1").checked=true;
                    }
                    
            }
            
        </script>
        
        <body onload="init()">
            请输入城市:<input type="text" id="position" /><a href="javascript:void(0)" onclick="show()">请选择希望的城市</a>
            <div id="cover"></div>
            <div id="citydiv">
             <a href="javascript:void(0)" id="closer" onclick="hide()">关闭</a>
             <select id="province" onchange="zicity()" >
                <option value="">--请选择省份--</option>
                 <option value="hn">河南</option>
                 <option value="hb">河北</option>
             </select>
             <br />
            <div id="hn" >
                <input id="hn1"  type="checkbox" name="city" value="郑州市">郑州市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="洛阳市">洛阳市<br />
                <input type="checkbox" name="city" value="焦作市">焦作市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="新乡市">新乡市<br />
                <input type="checkbox" name="city" value="鹤壁市">鹤壁市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="安阳市">安阳市<br />
                <input type="checkbox" name="city" value="濮阳市">濮阳市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="开封市">开封市<br />
                <input type="checkbox" name="city" value="商丘市">商丘市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="许昌市">许昌市<br />
                <input type="checkbox" name="city" value="漯河市">漯河市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="平顶山市">平顶山市<br />
                <input type="checkbox" name="city" value="南阳市">南阳市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="信阳市">信阳市<br />
                <input type="checkbox" name="city" value="济源市">济源市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="周口市">周口市<br />
                <input type="checkbox" name="city" value="驻马店市">驻马店市&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="三门峡市">三门峡市<br />
                <input type="button" value="提交" onclick="subs()" />&nbsp;&nbsp;<input type="button" value="取消" onclick="cancel()" />&nbsp;&nbsp;<input type="button" value="默认" onclick="defaultBtn()" />
            </div>
            <div id="hb" >
                <input id="hb1" type="checkbox" name="city" value="石家庄市">石家庄市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="廊坊市">廊坊市<br />
                <input type="checkbox" name="city" value="唐山市">唐山市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="衡水市">衡水市<br />
                <input type="checkbox" name="city" value="秦皇岛市">秦皇岛市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="张家口市">张家口市<br />
                <input type="checkbox" name="city" value="承德市">承德市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="保定市">保定市<br />
                <input type="checkbox" name="city" value="沧州市">沧州市&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="city" value="邢台市">邢台市 <br />
                <input type="checkbox" name="city" value="邯郸市">邯郸市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                <input type="button" value="提交" onclick="subs()" />&nbsp;&nbsp;<input type="button" value="取消" onclick="cancel()" />&nbsp;&nbsp;<input type="button" value="默认" onclick="defaultBtn()" />
            </div>
            </div>
            
            
        
        </body>
</html>

    

总结

  • 通过JavaScript脚本可以动态改变样式属性的值,语法如下:object.style.property;
  • 使用className属性可以动态改变页面元素上应用的类选择器
  • 样式属性display的作用是设置页面元素的显示方式,其值包括:none、inline、block
  • 以上主要讲解如何实现遮罩层实现表单登录功能的案例,至于表单如何验证,可以参照正则表达式的规则,自定义验证表单内容
标签: 前端 javascript html

本文转载自: https://blog.csdn.net/weixin_52937170/article/details/141891955
版权归原作者 VaporGas 所有, 如有侵权,请联系我们删除。

“前端进阶:JavaScript实现优雅遮罩层下的表单验证技巧”的评论:

还没有评论