使用 JavaScript 设置 PIN 验证?
javascriptweb developmentfront end technology
在本文中，我们将讨论如何使用 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>
运行上述脚本时，Web 浏览器会在网页上显示输入字段以及按钮。当用户在输入字段中输入密码并单击按钮时，将触发事件，并检查条件是否满足，如果满足，则显示"真"或"假"警报。
示例
让我们执行以下代码，其中我们添加了一个额外的条件，检查转换为数字的 字符串 是否实际上是数字；并返回真或假值。
<!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>
运行上述脚本时，Web 浏览器会显示在运行脚本时触发事件时发生的值，并检查条件，然后检查"if"语句。
