javascript - JavaScript 中的字母数字密码验证

Question

我在 javascript 中编写了用于在 jsp 中进行字母数字密码验证的函数，并在文本框的 onkeypress 事件上调用该函数，但不起作用。

function alphanumeric(inputtxt) {
  var mypswd = document.getElementById(inputtxt).value;
  mypswd = mypswd.trim();
  if (mypswd == "" || mypswd == null) {
    alert("Please enter password");
  } else if (!mypswd.match((/^(?=.\d)(?=.[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/)) {
    alert(" password must be alphanumeric");
  }
}

<form name="form1" method="post" action="Register">Username :
  <br>
  <input type="text" name="uname" onkeypress="return checkSpcialChar(event)" onkeydown=" alphanumeric(inputtxt)" />
  <br/>Password :
  <br>
  <input type="password" name="pwd" onkeypress="return checkSpcialChar(event)" />
  <br/>
  <br>
  <input type="submit" name="action" value="Submit" onsubmit="check()" />
  <input type="submit" value="Back" />
</form>

请帮忙。

Answer 1

我稍微更改了您的代码，因为其中一些代码对于您想要的最终结果来说不是必需的。

要点是。

onkeyup="alphanumeric(this)"

您可以使用 this 传入事件绑定(bind)到的元素。此外，我将该事件更改为 onkeyup，以便您可以验证当前键入的字符。

当您获取值时，您可以使用该元素来获取当前值。

var mypswd = input.value.trim()

警报确实很烦人，它们会阻止脚本的进一步执行或与页面的交互，因此我放入了一个包含消息的 div，以便用户获得有关其密码状态的实时反馈。

如果您只想进行字母数字验证，您可以将正则表达式大大简化为 /[^a-z0-9]+/i 它只是检查任何非字母数字字符。

const message = document.querySelector('.message')

function alphanumeric(input) {
  var mypswd = input.value.trim()
  if (mypswd == "" || mypswd == null) {
    message.innerHTML = "Please enter password"
  } else if (mypswd.match(/[^a-z0-9]+/i)) {
    message.innerHTML = "password must be alphanumeric"
  } else {
    message.innerHTML = "All good in the hood"
  }
}

<form name="form1" method="post" action="Register">
  <div class="message">Please enter a password</div>
  Passsword :
  <input type="text" 
    name="pword"
    id="pword"
    onkeyup=" alphanumeric(this)" 
  />
</form>