jquery简单表单验证

<!-- jquery表单验证 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="ex4.html" method="POST">
            <p>用户名：<input n="用户名" type="text"></p>
            <p>密码：<input n="密码" type="password"></p>
            <p>验证码：<input n="验证码" type="text"></p>
            <p><input type="submit" value="提交"></p>
        </form>
        <script src="jquery-1.12.4.js"></script>
        <script>
            //在页面框架加载完毕后马上执行，不用等待例如img之类的加载完成
            $(function(){
                $(':submit').click(function(){
                    //点击的时候删除之前遗留的span提示标签
                    $('.error').remove();
                    var flag = true;
                    $('input[type="text"], input[type="password"]').each(function(){
                        var v = $(this).val();
                        if(v.length <= 0){
                            //获取要提示的标签名
                            var attr = $(this).attr('n');
                            //创建提示标签
                            var span = document.createElement('span');
                            span.innerHTML = attr+'必填';
                            span.style.color = 'red';
                            //给span标签添加error类型，方便删除用
                            span.className = 'error';
                            $(this).after(span);
                            flag = false;
                            // return false;      //此处return false会导致input循环结束
                        }
                    });
                    //如果内容为空，则不提交，如不为空，则提交
                    return flag;
                });
            });
        </script>
    </body>
</html>
通过给绑定时间返回值的方式中断时间
jquery简单表单验证

猜你喜欢
