表单验证

世界没有我不行

于 2017-08-15 15:12:34 发布

阅读量190

点赞数

转载自《锋利的Jquery》

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq</title>
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <style type="text/css">
        label{
            width: 80px;
            display: inline-block;
        }
        .high{
            color: red;
            display: none;
        }
    </style>
    <body>
        <form method="get">
            <div class="int">
                <label for='user'> 用户名</label>
                <input type="text" name="user" id="user" value="" class="required" autofocus="autofocus"/>
            </div>
            <div class="int">
                <label for="email">邮 &nbsp; 箱</label>               
                <input type="text" name="email" id="email" value=""  class="required"/>
            </div>
            <div class="int">
                <label for="personinfo">个人资料</label>                
                <input type="text" name="personinfo" id="personinfo" value=""  class="required"/>
            </div>
            <div class="sub">

                <input type="reset" name="reset" id="reset" value="重置" />
                <input type="submit" value="登录" id="submit"/>   
            </div>
        </form>
    </body>
    <script type="text/javascript"> 
        $(function(){
            $('.required').each(function(){
                $(this).parent().append("<strong class='high'>*</strong>");
            })
        });

        //对需要填写的选项进行验证，验证失败时向div 中填入class为onError的提示语句；
        $("form .required").blur(function(){
            $(this).parent().find(".formTips").remove();
            $(this).parent().find(".high").css('display','none');
            if($(this).is('#user')){
                if(this.value=="" || this.value.length<=6){
                    $(this).parent().append('<span class="formTips onError">请输入大于6位数的用户名</span>');
                    $(this).next().css('display','inline');
                }else{
                    $(this).parent().append('<span class="formTips">ok</span>');
                }

            }else if($(this).is("#email")){
                var reg=/.+@.+\.[a-zA-Z]{2,4}$/;
                if($(this).val()==''||!reg.test($(this).val())){
                    $(this).parent().append('<span class="formTips onError">请输入正确的邮箱</span>');
                    $(this).next().css('display','inline');
                }else{
                    $(this).parent().append('<span class="formTips">ok</span>');
                }

            }
        })
        //当点击提示按钮时，验证表单中是否存在错误提示框；
        $('#submit').click(function(){
            $('form .required').trigger('blur'); //触发blur 事件的jquery方法
            var numError=$('form .onError').length;
            if(numError){
                //含错误提示框时，阻止表单提交
                return false;
            }
        })

    </script>
</html>

世界没有我不行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

转载自《锋利的Jquery》<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jq</title> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> </head>
复制链接

扫一扫