HOWTO · JavaScript

JavaScript 中的文字框驗證

驗證文字框是指觸發有關輸入欄位的訊息或資訊。如果它準備好提交或接受值,那麼我們認為它是有效的。這裡將重點介紹兩種驗證文字框的方法。

本頁內容

當文字框具有有效內容時,它被認為是有效的。alertconsole 可能會啟動一條訊息以確保使用者他錯過了更新值。

這是提交表單時一項有用且重要的任務。假設一個表單需要電子郵件 ID,並且在放置有效郵件之前它不會路由到目標頁面。

所有這些值都與資料庫相關,因此,空值可能會導致複雜性和計算錯誤。

在下一部分中,我們將定義兩種驗證文字區域的方法。一種是建立一個基本條件語句來檢查輸入值和返回訊息。

另一個是看 jQuery 是否也有類似的表現。讓我們檢查一下程式碼以便更好地理解。

在 JavaScript 中使用條件語句驗證文字框

在這裡,我們將生成兩個輸入欄位,一個用於文字,另一個用於密碼。以下任務是檢查文字框中的輸入值。

我們將根據需要設定這兩個欄位。這意味著每個文字框至少有一個字元(不是空格或空白)。

因此,在我們的例子中,我們將輸入 script 標籤,如果文字框內容為空或未定義,windows.alert 將觸發一條訊息。

程式碼片段:

<input type="text" id="login" placeholder="Username or Email"  />
<input type="password" id="password" placeholder="Password" />
<input type="submit" value="Login" onclick="validate();" />
<script>
        function validate() {
            if (document.getElementById("login").value == "") {
                alert("Username cannot be blank");
            } else if (document.getElementById("password").value == "") {
                alert("Password cannot be blank.");
            }
        }
</script>

輸出:

使用條件語句驗證文字框

每當我們將文字輸入欄位設定為某個值並按下 login 時,它會用 windows.alert 強調我們錯過了所需的文字框 password

驗證文字框非常方便在進一步的驅動器中跳過更復雜的任務。這更像是一種預防措施,讓我們知道我們必須設定準確的輸入。

在 JavaScript 中使用 jQuery 驗證文字框

jQuery 驗證文字框的方式與前面類似,我們將在下面的示例中進行檢查。如果我們試圖區分兩個任務,那就是 jQuery 準備了一個 jQuery 物件,而前一個使用 JavaScript 物件來觸發各個 ids。

讓我們跳到程式碼段。

程式碼片段:

<input type="text" id="txt" />
<input type="button" id="btn" value="Check" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            if ($("#txt").val() == "") {
                alert("Please enter Name!");
            }
        });
    });
</script>

輸出:

使用 jQuery 驗證文字框