JavaScript 中的文字框驗證
Anika Tabassum Era
2023年1月30日
2022年5月10日
當文字框具有有效內容時,它被認為是有效的。alert
或 console
可能會啟動一條訊息以確保使用者他錯過了更新值。
這是提交表單時一項有用且重要的任務。假設一個表單需要電子郵件 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>
輸出:
Author: Anika Tabassum Era