Question

我正在尝试使用Javascript验证表单，但截至目前，它正在验证第一个表单条目，而忽略其余表单。如果我的字符数少于6个，它将停止提交表单。一旦我添加了更多字符，即使其他所有内容都不正确，它也会表现得很好，然后提交。

HTML：

        <form class="form-horizontal" onsubmit="return validator(this);">
            <div class="form-group">
                <label class="control-label col-xs-3" for="userName">Username:</label>
                <div class="col-xs-9">
    <!-- USERNAME --><input type="text" class="form-control" id="userName" placeholder="Username"maxlength="50">
    <p id="userNameEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="Password">Password:</label>
                <div class="col-xs-9">
    <!-- PASS1 --><input type="password" class="form-control" id="Password" placeholder="Password"maxlength="50">
    <p id="password1Emsm"style="margin:0px;color:red;font-weight:bold;"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="Password2">Re-enter Password:</label>
                <div class="col-xs-9">
    <!-- PASS2 --><input type="password" class="form-control" id="Password2" placeholder="Re-enter Password"maxlength="50">
    <p id="password2Emsg"style="margin:0px;color:red;font-weight:bold;"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="firstName">First Name:</label>
                <div class="col-xs-9">
    <!-- FIRSTNAME --><input type="text" class="form-control" id="firstName" placeholder="First Name"maxlength="50">
    <p id="firstNameEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-3" for="lastName">Last Name:</label>
                <div class="col-xs-9">
    <!-- LASTNAME --><input type="text" class="form-control" id="lastName" placeholder="Last Name"maxlength="50">
    <p id="lastNameEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-3" for="zipCode">Zip Code:</label>
                <div class="col-xs-9">
    <!-- ZIPCODE --><input type="text" class="form-control" id="zipCode" placeholder="Zip Code" maxlength="10">
    <p id="zipCodeEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="phoneNumber">Phone Number:</label>
                <div class="col-xs-9">
                    <input type="tel" class="form-control" id="phoneNumber" placeholder="Phone Number"maxlength="12">
    <p id="phoneNumberEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="inputEmail">Email Address:</label>
                <div class="col-xs-9">
    <!-- EMAILADDRESS --><input type="email" class="form-control" id="inputEmail" placeholder="email@address.com"maxlength="100">
    <p id="emailEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
            </div>
        </div>
            <div class="form-group"><!-- BUTTONS -->
                <div class="col-xs-offset-3 col-xs-9">
                    <input type="submit" class="btn btn-primary" value="Submit">
                    <input type="reset" class="btn btn-default" value="Reset">
                </div>
            </div>
    </form>

JS：

function validator(form) {

var userName = document.getElementById("userName");
var password = document.getElementById("Password");
var password2 = document.getElementById("Password2");
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var email = document.getElementById("inputEmail");

var passwordFormat = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
var emailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if (userName.value.length < 6) {
    document.getElementById("userNameEmsg").innerHTML = "Must have at least 6 characters.";
    return false;
}

else if (password.value.length == 0) {
    document.getElementById("password1Emsg").innerHTML = "Please enter a password.";
    return false;
}

else if (!password.value.match(passwordFormat)) {
    document.getElementById("password1Emsg").innerHTML = "Enter correct password format.";
    return false;
}

else if (password.value != password2.value) {
    document.getElementById("password2Emsg").innerHTML = "Passwords do not match.";
    return false;
}

else if (email.value.length < 1) {
    document.getElementById("emailEmsg").innerHTML = "Please enter an email.";
    return false;
}

else if (!email.value.match(emailFormat)) {
    document.getElementById("emailEmsg").innerHTML = "Enter correct email format.";
    return false;
}
else {
    return true;
}
}

我删除了所有其他内容，并删除了底部的return语句，这对它的功能没有影响。

Answer 1

删除所有else if段，将其替换为纯if，然后删除return语句。

现在至少您的代码将运行并显示所有错误消息，而不仅仅是第一条错误消息。

现在，您将需要一个标志，表示您的表单无效并禁用了“提交”按钮：

function validator(form) {

  var userName = document.getElementById("userName");
  var password = document.getElementById("Password");

  var isFormValid = true;

  if (userName.value.length < 6) {
      document.getElementById("userNameEmsg").innerHTML = "Must have at least 6 characters.";
      isForValid = false;    
  }

    if (password.value.length == 0) {
      document.getElementById("password1Emsg").innerHTML = "Please enter a password.";
      isForValid = false;
    }

    /**check if form is Vald **/
    if(!isFormValid){
       //disable submit button
    }
}

但是，如果可以避免的话，请尽可能多地使用html的内置函数。没有理由不能仅仅使用

<input type="email" id="emailField" required />

然后致电document.getElementById('emailField').checkValidity();

无法验证超过表格中的第一个条目

1 个答案: