資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法學研究使用JavaScript設定PIN驗證？
在本文中，我們將討論如何使用JavaScript設定PIN驗證。我們將涵蓋建立提示以供使用者輸入其PIN號碼、根據儲存的值驗證使用者輸入以及根據比較結果返回適當的響應等主題。
資料驗證是用於確保使用者輸入準確、可靠和整潔的過程。根據典型的驗證過程，使用者已輸入有效日期、數字欄位中的文字以及所有必需欄位均已填寫。
我們可以根據長度和型別（例如，PIN必須是字串）來驗證PIN。讓我們看看以下示例，以瞭解有關使用JavaScript進行PIN驗證的更多資訊。
示例
在以下示例中，我們使用簡單的正則表示式來形成指令碼中的驗證。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial1"></p>
<p id="tutorial2"></p>
<p id="tutorial3"></p>
<p id="tutorial4"></p>
<script>
function validatePIN (pin) {
return /^(\d{4}|\d{6})$/.test(pin);
}
document.getElementById("tutorial1").innerHTML= JSON.stringify(validatePIN('1234'));
document.getElementById("tutorial2").innerHTML=JSON.stringify(validatePIN('123'));
document.getElementById("tutorial3").innerHTML= JSON.stringify(validatePIN('123456'));
document.getElementById("tutorial4").innerHTML=JSON.stringify(validatePIN('12345'));
</script>
</body>
</html>
執行指令碼時，事件將被觸發，使給定的PIN條件與給定的正則表示式進行檢查並提供值。如果滿足條件，則返回true；否則，返回false。
示例
考慮另一個示例，我們透過呼叫addEventListener函式來建立輸入欄位和按鈕，並驗證PIN。
<!DOCTYPE html>
<html>
<body>
<input type="text" />
<button>validate pin</button>
<script>
var validatePIN = (args) => {[...args] = args; return args.every(v => v.match(/\d/)) && [4, 6].some(n => args.length === n)};
document.querySelector("button")
.addEventListener("click", (e) => alert(validatePIN(e.target.previousElementSibling.value)))
</script>
</body>
</html>
執行上述指令碼後，網頁瀏覽器將在網頁上顯示輸入欄位和按鈕。當用戶在輸入欄位中輸入PIN並單擊按鈕時，將觸發事件，並檢查是否滿足條件，如果滿足，則顯示“true”或“false”警報。
示例
讓我們執行以下程式碼，其中我們添加了一個額外的條件，該條件檢查轉換為數字的字串實際上是否是數字；並返回true或false值。
<!DOCTYPE html>
<html>
<body>
<script>
function test(pin) {
if ((pin.length === 5 || pin.length === 7) && Number.isInteger(+pin)) {
return true
} else {
return false
}
}
document.write(test('12345')+"<br>");
document.write(test('asbcf'));
</script>
</body>
</html>
指令碼執行時，事件將被觸發，該事件檢查PIN條件並檢查輸入的數字是否有效，然後顯示值。在我們的例子中，它將為第一個PIN顯示true，為第二個PIN顯示false。
示例
考慮以下示例，我們在此示例中執行一個條件來確定傳遞的PIN是否有效。如果滿足條件，它將返回“PIN有效”，否則將顯示“PIN無效”。
<!DOCTYPE html>
<html>
<body>
<script>
function simpleValidationForPin(pinValues) {
if (!(typeof pinValues === "string" && !~pinValues.indexOf('.') && !isNaN(Number(pinValues)) && (pinValues.length === 2 || pinValues.length === 4))) {
return false;
} else {
return true;
}
}
if (simpleValidationForPin("0000.00") == true)
document.write("This is a valid pin")
else
document.write("This is not a valid pin"+"<br>")
if (simpleValidationForPin(66) == true)
document.write("This is a valid pin")
else
document.write("This is not a valid pin"+"<br>")
if (simpleValidationForPin("4444") == true)
document.write("This is a valid pin"+"<br>")
else
document.write("This is not a valid pin")
if (simpleValidationForPin("66") == true)
document.write("This is a valid pin"+"<br>")
else
document.write("This is not a valid pin")
if (simpleValidationForPin("666") == true)
document.write("This is a valid pin")
else
document.write("This is not a valid pin")
</script>
</body>
</html>
執行上述指令碼後，網頁瀏覽器將顯示在執行指令碼時觸發事件時發生的值，檢查條件後跟“if”語句。
更新於：2023年1月18日
2K+ 次瀏覽
廣告