需要表单成功消息答案

【问题标题】：Need Form successful message需要表单成功消息
【发布时间】：2014-09-26 15:57:09
【问题描述】：

我有一个表单，如果用户名和密码为空或不够长，我需要能够显示错误消息。我已经弄清楚了，它正在工作。我现在的问题是2折。 #1 如何在 1 个警报中显示多个错误？（使用数组？？）如果所有输入都正确，我如何产生成功的警报。这是我的 javascript 和 html。

<script>
function formIsValid(){
var validation = true;
validation &= checkUsername();
validation &= checkPassword();
return validation;
}   


function checkUsername(){
var name= document.forms["RegistrationForm"]["user"].value; 
var nameLength =name.length;
if(name == ""){
alert ("Please Enter a Username");
return false;
}
else if (nameLength <8){
alert ("The Username must be 8 characters");
return false;
}
}

function checkPassword(){   
var password=document.forms["RegistrationForm"]["pass"].value;
var passwordLength =password.length;
if(password ==""){
alert ("Please Enter a Password");
return false;
}
else if (passwordLength <8){
alert ("The Password must be 8 characters");
return false;
}
}



</script>

HTML代码

<form name="RegistrationForm"  onsubmit="return formIsValid()" action="">
<h2>Registration</h2>
Username:<input type="text" name="user" size="20"/> (At least 8 characters)<br/>
<br/>
Password:<input type="text" name="pass" size="20"/> (At least 8 Characters)<br/>
<br/>

<input type="submit" value="Submit">    
<input type="reset" name="reset" value="Clear"/>
<p>
</form>

【问题讨论】：

对于您的第一个问题，您应该将所有验证打包在一个函数中。在此函数中，您抛出验证函数，而不是为每个错误显示单个 alert()，而是将它们存储在数组中并将布尔值设置为 false。在验证结束时，如果您的布尔值为 false，则您会发出警报，然后添加已存储在数组中的字符串错误。对于第二个问题，为什么不简单地显示一个 alert() 呢？
您可以不使用警报，而是将错误消息放入数组中，然后如果您的数组不为空，则存在错误，您可以通过循环查看错误。
见下面的代码我在这里添加了一些验证。

标签： javascript html forms validation

【解决方案1】：

试试下面的代码，它应该会按照你想要的方式工作。 :)

<html>
<head>
<script>
var userFlag =true;
var passFlag = true;
var msg = "";
function formIsValid(){
  checkUsername();
  checkPassword();
  if(passFlag && userFlag ){

   return true;
  }
  else{
    alert (msg);
    msg="";
    return false;
  }
}   


function checkUsername(){
  var name= document.forms["RegistrationForm"]["user"].value; 
  var nameLength =name.length;
  if(name == ""){
    msg +="Please Enter a Username";
    userFlag = false;
  }
  else if (nameLength <8){
    msg +="The Username must be 8 characters";
    userFlag = false;  
  }
}

function checkPassword(){   
  var password=document.forms["RegistrationForm"]["pass"].value;
  var passwordLength =password.length;
  if(password ==""){ 
    msg += " and Please Enter a Password";
    passFlag = false;
  }
  else if (passwordLength <8){
    msg += "and The Password must be 8 characters";
    passFlag = false;
  }
}
</script> 
</head>

<body>
    <form name="RegistrationForm"  onsubmit="return formIsValid()" action="">
      <h2>Registration</h2>
      Username:<input type="text" name="user" size="20"/> (At least 8 characters)<br/>
      <br/>
      Password:<input type="text" name="pass" size="20"/> (At least 8 Characters)<br/>
      <br/>
      <input type="submit" value="Submit">    
      <input type="reset" name="reset" value="Clear"/>
    </form> 
</body>
</html>

【讨论】：

这适用于多个警报，但是如果最后成功则没有消息。如果它创建一个错误消息，那么在你修复它之后你就会成功。

【解决方案2】：

可能有点像这样：

function checkPassword(errors){   
    ...
    if (password == "") {
        errors.push("Please Enter a Password");
    } else if (passwordLength <8){
        errors.push("The Password must be 8 characters");
    }

    return errors;
}

那么你的调用方法可能是这样的：

function formIsValid(){
    var errors = [];
    errors = checkUsername(errors);
    errors = checkPassword(errors);

    if (errors.length == 0) alert('win');
    else alert(errors.join('\r\n'));
}

【讨论】：