jqeury验证表单

最新推荐文章于 2024-09-08 21:45:17 发布

原创最新推荐文章于 2024-09-08 21:45:17 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

10 篇文章

订阅专栏

<!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验证，