JavaScript 表单验证高级特效

最新推荐文章于 2021-08-04 08:55:47 发布

南娇

最新推荐文章于 2021-08-04 08:55:47 发布

阅读量283

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_42287758/article/details/99339311

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单验证高级特效

本节内容

表单特效及时提示
自动补全
Tab选项卡
图片轮播

第一节表单提示特效

获得焦点和失去焦点样式

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
  /*失去焦点时的样式*/
  .blur
  {
    border:1px solid black;
    background-color:white;
  }
  /*获得焦点时的样式*/
  .focus
  {
    border:1px solid red;
    background-color:yellow;
  }
  </style>

  <script type="text/javascript">
   //失去焦点
   /*
   function sqjd()
   {
    var phone = document.getElementById("phone");
    phone.className="blur";
   }

   function hdjd()
   {
    var phone = document.getElementById("phone");
    phone.className="focus";
   }*/
    
    //加载事件时，绑定元素的事件
    /*window.οnlοad=function(){
        var phone = document.getElementById("phone");
        phone.οnblur=sqjd;
        phone.οnfοcus=hdjd;
    }*/
  </script>
 </head>

 <body>
  手机:
  <input type="text" 
         name="phone" 
         id="phone"
         class="blur"
         οnblur="this.className='blur'"
         οnfοcus="this.className='focus'"
         />
 </body>
</html>

表单及时提示特效

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
  p span
  {
    display:inline-block;
    width:200px;
    height:20px;
    font-size:12px;
    line-height:20px;
    border-left:3px solid #000099;
    padding:3px;
    
  }

  p span.info
  {
    background-color:#9999ff;
  }
  p span.error
  {
    background-color:#ff9966;
  }
  p span.success
  {
    background-color:#00ff33;
  }
  </style>

  <script type="text/javascript">
    function $(id)
    {
        return document.getElementById(id);
    }

    //校验账号
    function checkAccount(status)
    {
        //如果选中文本框
        if(status=='focus')
        {
            $("account_tip").innerHTML="账号不能空，长度2-6";
            $("account_tip").className="info";
        }
        else /*光标离开文本框*/
        {
            var account = $("account").value;
            var reg = /^\w{2,6}$/;
            if(reg.test(account))
            {
                $("account_tip").innerHTML="√ 账号正确";
                $("account_tip").className="success";
                return true;
            }
            else
            {
                $("account_tip").innerHTML="× 账号错误";
                $("account_tip").className="error";
                return false;
            }
        }
    }

    //校验手机
    function checkPhone(status)
    {
        if(status=='focus')
        {
            $("phone_tip").innerHTML="手机不能空,长度11";
            $("phone_tip").className="info";
        }
        else
        {
            var phone = $("phone").value;
            var reg = /^1[359]\d{9}$/;
            if(reg.test(phone))
            {
                $("phone_tip").innerHTML="√手机格式正确";
                $("phone_tip").className="success";
                return true;
            }
            else
            {
                $("phone_tip").innerHTML="×手机格式不正确";
                $("phone_tip").className="error";
                return false;
            }
        }

    }
    //校验表单
    function checkAll()
    {
        //所有表单项校验成功，则提交
        //& 与 && ：判断规则一样，表达式有一个false结果就为false
        //&& :如果前面表达式为false时，后面不再执行
        //&  :不管前面是否时false,会将整个表达式执行完
        if(checkAccount('blur')&checkPhone('blur'))
        {
            return true;
        }
        return false;
    }

  </script>
 </head>

 <body>
  <fieldset>
    <legend>用户注册</legend>
    <form οnsubmit="return checkAll()">
        <p>
            账号:
            <input type="text" 
                   name="account" 
                   id="account"
                   οnfοcus="checkAccount('focus')"
                   οnblur="checkAccount('blur')"
                   />
            <span id="account_tip" class="info">账号不能空，长度2-6</span>
        </p>
        <p>
            手机:
            <input type="text" 
                   name="phone" 
                   id="phone"
                   οnblur="checkPhone('blur')"
                   οnfοcus="checkPhone('focus')"
                   />
            <span id="phone_tip"  class="info">手机不能空,长度11</span>
        </p>
        <p>
            <input type="submit" value="注册"/>
        </p>
    </form>
  </fieldset>
 </body>
</html>

第二节自动补全效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8"></meta>
  <title> new document </title>
  <style type="text/css">
  #con
  {
    width:500px;
    height:50px;
    border:0px solid red;
    margin:200px auto;
  }
  #con #key
  {
    width:400px;
    height:47px;
    font-size:40px;
    border:1px solid black;
  }
  #con .btn
  {
    height:48px;
    border:1px solid black;

    vertical-align:8px;
    width:60px;
  }
  #info
  {
    width:100px;

    border:1px solid gray;

    position:absolute;
    left:0px;
    top:0px;
    display:none;
  }
  #info div
  {
    height:30px;
    padding-left:10px;
    line-height:30px;
    border-bottom:1px dashed gray;
  }
  #info div:hover
  {
    background-color:gray;
    color:white;
  }
  </style>

  <script type="text/javascript">
    function $(id)
    {
        return document.getElementById(id);
    }

    var ary = ["一行","某某","某人","某天","某时","某刻","沧海一声笑"];

    function showInfo()
    {

        var divInfo = $("info");
        var txtKey = $("key");
        divInfo.style.left=txtKey.offsetLeft+"px";
        divInfo.style.top=(txtKey.offsetTop+txtKey.offsetHeight)+"px";
        divInfo.style.width=txtKey.offsetWidth+"px";
        
        var key = txtKey.value;
        if(key=="")
        {
            divInfo.style.display="none";
            return;
        }

        var reg = new RegExp(key);
        var res = "";
        for(var i=0;i<ary.length;i++)
        {   
        var val = ary[i];
            if(reg.test(val))
            {
                res+="<div οnclick='setVal(this.innerHTML)'>"+val+"</div>";
            }
            
        }
        if(res!="")
        {
            divInfo.innerHTML=res;
            divInfo.style.display="block";
        }
        else
        {
            divInfo.style.display="none";
        }
    }

    function setVal(neirong)
    {
        var txtKey = $("key");
        txtKey.value=neirong;
        var divInfo = $("info");
        divInfo.style.display="none";
    }
  </script>
  
 </head>

 <body>
    <div id="info"></div>
    <div id="con">
        <input type="text" name="key" id="key" οnkeyup="showInfo()"/>
        <input type="button" value="搜索" class="btn"/>
    </div>
 </body>
</html>

第三节 Tab选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="UTF-8">
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
    ul{
        list-style:none;
        width:385px;
        margin:0px;
        padding:0px;
    }
    li{
        width:70px;
        height:30px;
        border-bottom:0px;
        float:left;
        /*background-color:#ccc;*/
        line-height:30px;
        text-align:center;
        /*margin-left:3px;*/
    }
    li.nc{
        border:0px;
    }
    li.ck{
        border:1px solid blue;
        border-bottom:0px;
        margin-bottom:-1px; 
        background-color:lightblue;
    }


    #content div{
        border:1px solid blue;
        width:400px;
        height:100px;
        background-color:lightblue;
        clear:both;
        padding:10px;
    }

  </style>
  <script type="text/javascript" language="javascript">
  function $(id)
  {
    return document.getElementById(id);
  }
  function show(id)
  {
    var tab=document.getElementById("tab"+id);
    var content=document.getElementById("con"+id);
    for(var i=1;i<=5;i++)
    {
        if(i!=id)
        {
            $("con"+i).style.display="none";
            $("tab"+i).className="nc";
        }
    }
    content.style.display="block";
    tab.className="ck";
  }

  var index=1;
  function autoTab()
  {
    if(index==6)
    {
        index=1;
    }
    show(index);
    index++;
    //setTimeout("autoTab()",2000);
  }
  window.οnlοad=autoTab;
  </script>
 </head>
 <body>
  <div id="outer">
    <ul>
        <li id="tab1" οnclick="show(1)">百度</li>
        <li id="tab2" οnclick="show(2)">淘宝</li>
        <li id="tab3" οnclick="show(3)">京东</li>
        <li id="tab4" οnclick="show(4)">苏宁易购</li>
        <li id="tab5" οnclick="show(5)">瓜子</li>
    </ul>
    <div id="content">
        <div id="con1">搜你想搜</div>
        <div id="con2">购物就来淘宝</div>
        <div id="con3">上京东无假货</div>
        <div id="con4">价格便宜应有尽有</div>
        <div id="con5">买卖二手车</div>
    </div>
  </div>
 </body>
</html>

第四节图片轮播

<!DOCTYPE html >
<html >
 <head>
    <meta charset="UTF-8">
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  
  <style type="text/css">
    #outer
    {
        width: 600px;
        height: 600px;
        margin: 0px auto;
    }
 
    ul{
        list-style:none;
        width:385px;
        margin:0px;
        padding:0px;
    }
    li{
        width:70px;
        height:30px;
        border-bottom:0px;
        float:left;
        /*background-color:#ccc;*/
        line-height:30px;
        text-align:center;
        /*margin-left:3px;*/
    }
    li.nc{
        border:0px;
    }
    li.ck{
        border:1px solid white;
        border-bottom:0px;
        margin-bottom:-1px; 
        background: mistyrose;
    }
    
    #content div{
        border:1px solid white;
        width:330px;
        height:260px;
        text-align: center;
        clear:both;
        background: mistyrose;
        padding:10px;
    }
    
  </style>
  <script type="text/javascript" language="javascript">
  function $(id)
  {
    return document.getElementById(id);
  }
  function show(id)
  {
    var tab=document.getElementById("tab"+id);
    var content=document.getElementById("con"+id);
    for(var i=1;i<=4;i++)
    {
        if(i!=id)
        {
            $("con"+i).style.display="none";
            $("tab"+i).className="nc";
        }
    }
    
    content.style.display="block";
    tab.className="ck";
  }

  var index=1;
  function autoTab()
  {
    if(index==5)
    {
        index=1;
    }
    show(index);
    index++;
    setTimeout("autoTab()",2000);
  }
  window.οnlοad=autoTab;
  </script>
 </head>
 <body>
 
  <div id="outer">
    
    <div id="content">
        <div id="con1"><img src="13.jpg"></div>
        <div id="con2"><img src="15.jpg"></div>
        <div id="con3"><img src="4.jpg"></div>
        <div id="con4"><img src="19.jpg"></div>

        <ul>
        <li id="tab1" οnclick="show(1)">1</li>
        <li id="tab2" οnclick="show(2)">2</li>
        <li id="tab3" οnclick="show(3)">3</li>
        <li id="tab4" οnclick="show(4)">4</li>
    </ul>
    </div>
  </div>
    
 </body>
</html>

南娇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 表单验证高级特效

表单验证高级特效本节内容表单特效及时提示自动补全 Tab选项卡图片轮播第一节表单提示特效获得焦点和失去焦点样式<!DOCTYPE html><html> <head> <title> my page </title> <style type="tex...
复制链接

扫一扫