95-96

時間 2020-02-02

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form action="6.html" method="POST">
        <input type="text">

        <input type="submit" value="提交">

    </form>

</body>
</html>

上2圖：點擊提交後跳轉到其餘htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form action="6.html" method="POST">
        <input type="text">

        <input type="submit" value="提交">

    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            var v = $(this).prev().val();   //獲取輸入框的值
            if(v.length > 0){
                return true         //大於0，就返回true，true的話就會跳轉
            }else {
                alert('請輸入內容');    //內容不大於0，就alert，且返回false，不跳轉
                return false
            }
        })
    </script>

</body>
</html>

上圖：當輸入爲空時，進行alert提示；jquery

上2圖：輸入框中有內容就成功跳轉。ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form id="f1" action="6.html" method="POST">
        <div><input name="n1" type="text"></div>
        <div><input name="n2" type="password"></div>
        <div><input name="n3" type="text"></div>
        <div><input name="n4" type="text"></div>
        <div><input name="n5" type="text"></div>

        <input type="submit" value="提交">

    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    return false;
                }
            });
            alert('內容爲空');
        })

    </script>

</body>
</html>

代碼說明：this

點擊submit，關聯input=text和input=password的標籤；經過each循環每一個標籤；
獲取輸入框中的值；
若是其中只要有一個input輸入框中的內容<=0，就return false，中止其餘input標籤的each循環；

上2圖：return false只中止了each循環，沒有中止整個程序。因此能夠看到循環以外的alert彈框信息；點擊肯定就會提交跳轉頁面。spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form id="f1" action="6.html" method="POST">
        <div><input name="n1" type="text"></div>
        <div><input name="n2" type="password"></div>
        <div><input name="n3" type="text"></div>
        <div><input name="n4" type="text"></div>
        <div><input name="n5" type="text"></div>

        <input type="submit" value="提交">

    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    return false;
                }
            });
            return false;   //這裏return false，就不會提交，不會跳轉頁面
        })

    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form id="f1" action="6.html" method="POST">
        <div><input name="n1" type="text"></div>
        <div><input name="n2" type="password"></div>
        <div><input name="n3" type="text"></div>
        <div><input name="n4" type="text"></div>
        <div><input name="n5" type="text"></div>

        <input type="submit" value="提交">

    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            var flag = true;    //局部變量，默認爲true
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    flag = false;   //只要任意一個input爲空，就設置爲false
                    return false;
                }
            });
            return flag;    //若是input都不爲空，return的就是true，就會提交併跳轉頁面。
        })

    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form id="f1" action="6.html" method="POST">
        <div><input name="n1" type="text"></div>
        <div><input name="n2" type="password"></div>
        <div><input name="n3" type="text"></div>
        <div><input name="n4" type="text"></div>
        <div><input name="n5" type="text"></div>

        <input type="submit" value="提交">

    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            var flag = true;
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    flag = false;
                    // return false;
                }
            });
            return flag;
        })

    </script>

</body>
</html>

代碼說明：使用return false;任意其中一個input爲空，就會退出循環；註釋掉return false;的話，即便有input爲空，也會循環全部input纔會退出循環。code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form id="f1" action="6.html" method="POST">
        <div><input name="n1" type="text"></div>
        <div><input name="n2" type="password"></div>
        <div><input name="n3" type="text"></div>
        <div><input name="n4" type="text"></div>
        <div><input name="n5" type="text"></div>

        <input type="submit" value="提交">

    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {

            var flag = true;
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    flag = false;
                    var tag = document.createElement('span');   //建立span標籤
                    tag.innerHTML = '*必填選項';    //span標籤內容
                    $(this).after(tag)  //將span標籤添加到input後面
                    // return false;
                }
            });
            return flag;
        })

    </script>

</body>
</html>

上圖：若是input爲空，則添加span標籤和其內容進行提示；orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red; <!--提示內容爲紅色-->
        }
    </style>
</head>
<body>

    <form id="f1" action="6.html" method="POST">
        <div><input name="n1" type="text"></div>
        <div><input name="n2" type="password"></div>
        <div><input name="n3" type="text"></div>
        <div><input name="n4" type="text"></div>
        <div><input name="n5" type="text"></div>

        <input type="submit" value="提交">

    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            $('.error').remove();   //再次提交的時候，要先清空span標籤提示信息
            var flag = true;
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    flag = false;
                    var tag = document.createElement('span');
                    tag.className = 'error';
                    tag.innerHTML = '*必填選項';
                    $(this).after(tag)
                    // return false;
                }
            });
            return flag;
        })

    </script>

</body>
</html>

上圖：先清空，在添加span標籤；全部其餘未填寫內容的都會被提示；但若是取消return false;的註釋，那麼這裏只會其中一個input進行提示。htm

上2圖：全部input不爲空，就會正常跳轉。ip

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。