Question

我有以下代码：

function passVerif() {
  if (document.forms['form'].pass.value === "") {
    messagePV.innerHTML = ("Password field is empty!")
    //alert("Password field is empty!");
    return false;
  }
  return true;
}

function emailVerif() {
  if (document.forms['form'].email.value === "") {
    messageEV.innerHTML = ("Email field is empty!")
    //alert("Email field is empty!");
    return false;
  }
  return true;
}

function validate() {
  var email = document.getElementById("input").value;
  var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

  if (!emailFilter.test(email)) {
    messageV.innerHTML = ("Please enter a valid e-mail address!")
    //alert('Please enter a valid e-mail address!');
    return false;
  }
}

<div>
  <form name="form"> Login<br>
    <input type="text" name="email" placeholder="Enter email here" id="input" class="input">Email address<br>
    <input type="password" name="pass" placeholder="Enter password here" class="input">Password<br>
    <input type="button" name="required" onclick="return passVerif(), emailVerif(), validate()">
  </form>
</div>
<div id="messagePV"></div>
<div id="messageEV"></div>
<div id="messageV"></div>

如您所见，输入类型为submit。因此（点击按钮后页面刷新）我想要显示的文本在刷新后消失。

正如我在其他帖子中所读到的，从submit到button的简单更改将会解决问题。

但我怀疑我在所有功能中搞砸了return false和return true指令。

这是对的吗？如果它们符合逻辑，我可以避免页面刷新并继续使用submit？至少在满足所有条件并且形式良好之前。

换句话说，有人可以帮我设置return false和true，只有在满足所有条件的情况下页面才会刷新。

非常感谢，我甚至都不是菜鸟。

代码是从互联网上的不同来源复制的。我正处于编码道路的最开始。请怜悯:)）

Answer 1

我会将其更改为一个验证函数，并根据是否存在错误而返回一个bool：

＆＃13;

// Just have one validation function
function validate() {
  var errorMessage = '';   // build up an error message
  var email = document.forms['form'].email.value;
  var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

  if (email === "") {
    errorMessage += "Email field is empty!<br>";
  } else if (!emailFilter.test(email)) {                        // this can be else if
    errorMessage += "Please enter a valid e-mail address!<br>";
  }
  
  if (document.forms['form'].pass.value === "") {
    errorMessage += "Password field is empty!<br>"
  }
  
  if (errorMessage === '') {
      return true;                                                       // return true as no error message
  } else { 
     document.getElementById('error-message').innerHTML = errorMessage;  // show error message and return false
     return false;
  }
}

＆＃13;

<div>
  <form name="form"> Login<br>
    <input type="text" name="email" placeholder="Enter email here" id="input" class="input">Email address<br>
    <input type="password" name="pass" placeholder="Enter password here" class="input">Password<br>
    <input type="submit" name="required" onclick="return validate();">
  </form>
</div>
<div id="error-message">
  <!-- CAN HAVE ONE ERROR MESSAGE DIV -->
</div>

＆＃13;

Answer 2

我尝试使用您的代码，我可以发现消息没有根据条件进行更新。因此，我对您的代码进行了一些修改，以根据哪个条件失败来显示消息。

HTML

<div>
    <form name="form"> Login<br>
        <input type="text" name="email" placeholder="Enter email here" id="input" class="input">Email address<br><br>
        <input type="password" name="pass" placeholder="Enter password here" class="input">Password<br><br>
        <input type="submit" name="required" value="Submit" onclick="return passVerif(), emailVerif(), validate()">
    </form>
</div>
<div id="messagePV"></div>
<div id="messageEV"></div>
<div id="messageV"></div>

JS

function passVerif() {
messagePV.innerHTML = ("")
if(document.forms['form'].pass.value === "") {
 messagePV.innerHTML = ("Password field is empty!")
    //alert("Password field is empty!");
return false;
 }
    return true;
}

function emailVerif() {
messageEV.innerHTML = ("")
  if(document.forms['form'].email.value === "") {
    messageEV.innerHTML = ("Email field is empty!")
      //alert("Email field is empty!");
    return false;
  }
    return true;
}

function validate() {
messageV.innerHTML = ("")
var email = document.getElementById("input").value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

if (!emailFilter.test(email)) {
        messageV.innerHTML = ("Please enter a valid e-mail address!")
        //alert('Please enter a valid e-mail address!');
        return false;
    }
}

通过将错误消息初始化为空标记，您可以保留一组新的错误消息。

Jsfiddle：https://jsfiddle.net/85w7qaqx/1/

希望这会有所帮助。

使用innerHTML dissapear获得的文本

2 个答案: