jqeury验证表单

来源：互联网发布：淘宝联盟怎么查订单号编辑：程序博客网时间：2024/06/12 19:56
<!DOCTYPE html><html><head>  <title></title></head><body><form method="post" action="">    <div class="int">        <b>用户名:</b>        <input type="text" id="username" class="required" />    </div>    <div class="int">        <b>邮箱:</b>        <input type="text" id="email" class="required" />    </div>    <div class="int">        <b >个人资料:</b>        <input type="text"  />    </div>    <div class="sub">        <input type="submit" value="提交" id="send"/>    </div></form></body></html><script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">//jquery的自动加载函数，这个函数内的代码都会在页面打开时自动加载。$(function(){              //获得form表单下的所有input按钮，并增加blur事件        $('form :input').blur(function(){            //获得当前input的父元素，后面会用到             var $parent = $(this).parent();             //每次失去焦点都会移除这个提示信息，因为如果不移除的话就会重复提示很多。可以删了试试             $parent.find(".tishi").remove();             //验证用户名，如果当前的input的id为username则验证用户名             if( $(this).is('#username') ){                    //如果当前元素的值为空                    if( this.value==""  ){                        //则通过$parend这个父元素下追加一个span子元素， span里面就是提示信息。并且class=“tishi onError” 。这代表2个class，同class=“tishi" class="onError"                        $parent.append('<span class="tishi onError">请输入的用户名</span>');                    }else{                        $parent.append('<span class="tishi onSuccess">输入正确</span>');                    }             }             //验证邮件             if( $(this).is('#email') ){                if( this.value==""  ){                      $parent.append('<span class="tishi onError">请输入正确的E-Mail地址</span>');                }else{                      $parent.append('<span class="tishi onSuccess">输入正确</span>');                }             }        })                //当点击submit的时候会触发这个点击事件、         $('#send').click(function(){                //当点击提交的时候，会让form表单下的所有input框并且input框的class=“required”的元素自动失去焦点，  失去焦点就是判断用户输入是否合法                //可以删除这行代码，然后直接点击提交按钮，试一试效果                $("form :input.required").trigger('blur');                //判断form表单下 class=onError标签的个数，如果不为0，那么就说明还有错误的提示信息。                var numError = $('form .onError').length;                if(numError){                    return false;                }                 alert("注册成功");         });       })//]]></script>给嵩讲解的jquery验证，
0 0