jquery008-表单验证 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style>
        .error{
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body style="width: 980px;margin: 0 auto">
    <form id="i1" action="jquery004-modal-box.html">
        <div><input type="text"/><span class="error hide">输入框不能为空</span></div>
        <div><input type="text"/><span class="error hide">输入框不能为空</span></div>
        <div><input type="text"/><span class="error hide">输入框不能为空</span></div>
        <div><input type="password"/><span class="error hide">输入框不能为空</span></div>

        <!-- 为了不跳转，好验证，先绑定button       -->
        <div><input type="button" value="按 键"/></div>
        <div><input type="submit" value="提 交"/></div>
    </form>
    <script src="jquery3.6.1.js"></script>
    <script>
        var sta = true;
        // $('#i1 :button').click(function (){
        $('#i1 :submit').click(function (){
            $('#i1 :text,:password').each(function (){
                // console.log(this);
                if(this.value ==0){
                    $(this).next().removeClass('hide');
                    sta = false;
                    return false;
                }else {
                    $(this).next().addClass('hide');
                };
            });
            return sta;
        });
        // 直接加span标签，加display:none;效果更好；
        // var sta = true;
        // $('#i1 :button').click(function (){
        //     $('i1 .error').remove();
        //     $('#i1 :text,:password').each(function (){
        //         // console.log(this);
        //         if(this.value ==0){
        //             var s = document.createElement('span');
        //             $(s).addClass('error');
        //             s.innerText = '输入框不能为空';
        //             $(this).after(s);
        //             sta = false;
        //             return false;
        //         };
        //     });
        //     return sta;
        // });
    </script>
</body>
</html>
posted @ 2022-11-27 16:45  wode-wode  阅读(21)  评论(0)    收藏  举报