Question

我正在设置验证表单。我当前要执行的操作是获取调用我的函数的按钮，然后该按钮将验证某些字段，并提示或显示错误消息。

我尝试移动脚本标签的位置，尝试更改脚本标签的位置，并尝试调试它以查看错误的位置。没有一个有效，我完全傻眼了。

此外，我已经在Google Chrome，Firefox和Edge上进行了测试，结果相同。

var emailAdd = document.getElementById("emailAdd");
var error = document.getElementById("error");

function checkValidity() {

  if (emailAdd.value.length === 0 || !RegExp.test(emailAdd.value)) {
    error.className = "error-message"

  } else {
    prompt("t");
  }
}

input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 2px;
  resize: none;
}

input.invalid {
  background-color: #FDD;
  box-shadow: 0px 0px 7px 1px #FF0000;
}

input:focus.invalid {
  outline: none;
}

span.error-message {
  width: 100%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #FF0000;
  color: #FFF;
  font-size: 80%;
  padding: 5px;
  margin-left: 10px;
}

<label>Email Address</label>
<input type="text" class="emailAdd" id="emailAdd" placeholder="Eg. johnsmith@account.com" onkeyup="emailValidate();">
<span class="error-message" id="error">test</span>

<button type="button" onclick="checkValidity();">Submit</button>

jsfiddle：https://jsfiddle.net/ev95wz1d/3/（具有CSS和其他所有功能）编辑：JsFiddle已将类设置为错误消息，该类显示了我想要的结果，将其更改回错误以查看问题。

如果if语句为true，则显示错误消息（我知道没有文本，但是span仍应更改类，并且将显示为无文本），如果该语句为false，则提示消息。

但是，它什么也不做。没有错误信息，什么都没有。

Answer 1

使用新的addEventListener方法确实可以代替传统的事件处理方法。

看起来checkValidity是现有函数（https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity），因此您正在与之竞争。您可以使用addEventListener或更改函数的名称。

var emailAdd = document.getElementById("emailAdd");
var error = document.getElementById("error");

emailAdd.addEventListener("input",function(){
    if(this.value.length === 0 || !RegExp.test(this.value)){
        this.className = "invalid";
    }
    else{
        this.className = "valid";
    }
});

document.getElementById("btn-submit").addEventListener("click",function(){
  if(emailAdd.value.length === 0 || !RegExp.test(emailAdd.value)){
      error.className = "error-message"
      error.innerHTML = "ERROR";
    }
    else{
        prompt("t");
    }
});

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 2px;
    resize: none;
}

input.invalid {
    background-color: #FDD;
    box-shadow: 0px 0px 7px 1px #FF0000;
}

input:focus.invalid {
    outline: none;
}

span.error-message {
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #FF0000;
    color: #FFF;
    font-size: 80%;
    padding: 5px;
    margin-left: 10px;
}

<label>Email Address</label>
<input type="text" class="emailAdd" id="emailAdd" placeholder="Eg. johnsmith@account.com">
<span class="error-message" id="error">test</span>

<button type="button" id="btn-submit">Submit</button>

Answer 2

我对您的RegExp类一无所知，但我想您想实现这一点（减去正则表达式检查）：

var emailAdd = document.getElementById("emailAdd");
var error = document.getElementById("error");

function emailValidate() {
  if(emailAdd.value.length === 0){ // Removed regex checking for now
        error.className = "error-message"

    }
    else{
        error.className = "good-message"
    }
}

function submit() {
  if(emailAdd.value.length === 0){ // Removed regex checking for now
        confirm("Bad!")
    }
    else{
        confirm("Good!")
    }
}

// Use event listeners for easier handling
document.getElementById("b1").addEventListener("click", function(){
  submit();
});

document.getElementById("emailAdd").addEventListener("keyup", function(){
  emailValidate();
});

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 2px;
    resize: none;
}

input.invalid {
    background-color: #FDD;
    box-shadow: 0px 0px 7px 1px #FF0000;
}

input:focus.invalid {
    outline: none;
}

/*A new class for positive validation*/
span.good-message {
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: green;
    color: #FFF;
    font-size: 80%;
    padding: 5px;
    margin-left: 10px;
}

span.error-message {
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #FF0000;
    color: #FFF;
    font-size: 80%;
    padding: 5px;
    margin-left: 10px;
}

<label>Email Address</label>
<input type="text" class="emailAdd" id="emailAdd" placeholder="Eg. johnsmith@account.com">
<span class="good-message" id="error">test</span> <!-- Initial validation should be positive: hence the class good-message -->

<button id="b1">Submit</button>

随时可以再次添加您的RegExp验证！

Onclick事件拒绝运行，这是怎么回事，如何解决？

2 个答案: