javascript 是否可以在表单验证中使用参数？

whlutmcx 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(135)

我试图实现一个简单的表单验证，但不知何故，我无法使它与参数一起工作。
以下是一个输入的代码：

const firstName = document.getElementById("first-name");
const nameRegex = /^[a-zA-Z]{2,15}$/;
firstName.addEventListener("blur", validate(firstName));

function validate(id) {
    let re = "";
    switch (id) {
        case firstName:
            re = nameRegex;
            break;
        case lastName:
            re = nameRegex;
            break;
        case email:
            re = emailRegex;
            break;
        case password:
            re = passwordRegex;
            break;
    }

    if (!re.test(id.value)) {
        id.parentElement.classList.add("error");
        id.parentElement.nextElementSibling.classList.remove("hide");
    } else {
        id.parentElement.classList.remove("error");
        id.parentElement.nextElementSibling.classList.add("hide");
    }
}

看起来代码无法进入ID值字段。
作为参考，此代码工作正常：

function validateFirstName() {
    if (!nameRegex.test(firstName.value)) {
        firstName.parentElement.classList.add("error");
        firstName.parentElement.nextElementSibling.classList.remove("hide");
    } else {
        firstName.parentElement.classList.remove("error");
        firstName.parentElement.nextElementSibling.classList.add("hide");
    }
}

有谁能给我指个方向吗？（我只想用香草JS）

JavaScript

来源：https://stackoverflow.com/questions/65021676/can-i-use-parameters-in-form-validation

2条答案

按热度按时间

soat7uwm1#

首先，getElementById返回一个HTMLInputElement，而不是元素的实际ID。

const firstName = document.getElementById("first-name"); // typeof HTMLInputElement

正如其他注解中提到的，您的事件侦听器绑定到validate(firstName)的返回值，即void或undefined。
您需要做的是告诉事件侦听器在元素上发生blur事件时激发函数。

firstName.addEventListener("blur", validate); // Bind your entire validate function instead of the return value

现在，您必须更改validate函数内部的逻辑，以区分不同的输入。

function validate(event) {
  // event.target is your entire element
  // event.target.value is the current value
  // event.target.id is the string id ie. first-name

  switch(event.target.id) {
    case 'first-name'
      re = nameRegex; // Assigns your nameRegex
    break;
  }

  if(re === '') {
    return; // Do nothing as we have no regex to validate with
  }

  // Your other code here
}

赞(0）回复(0）举报 2022-12-25

eqzww0vc2#

在事件处理程序中添加了.addEventListener()，其中的this将成为触发事件的元素，这一事实将使您受益匪浅。
您可以在validate()中使用this来代替id

function validate() {
    let re = "";
    switch (this) {
        case firstName:
            re = nameRegex;
            break;
        case lastName:
            re = nameRegex;
            break;
        case email:
            re = emailRegex;
            break;
        case password:
            re = passwordRegex;
            break;
    }

    if (!re.test(this.value)) {
        this.parentElement.classList.add("error");
        this.parentElement.nextElementSibling.classList.remove("hide");
    } else {
        this.parentElement.classList.remove("error");
        this.parentElement.nextElementSibling.classList.add("hide");
    }
}

略简化示例：
x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 是否可以在表单验证中使用参数？

2条答案

相关问题

热门标签

最新问答