由于问题性别部分，注册表格不会返回true

Question

我创建的注册表单（带有验证）几乎已经完成，但是在表单的性别部分有一点问题：即使我检查了一个单选按钮并且整个表单已填满，表单仍然赢了t返回true。我需要你的帮助。

HTML

<form role="form" action="" method="post" class="reg-form col-md-12 col-sm-12 col-lg-12">
    <div class="form-group col-md-6 col-sm-6 col-lg-6 fname_group">
        <label>First Name</label>
        <input type="text" name="reg_first_name" class="form-control reg_first_name" autocomplete="off">
        <span class="help-block fname_error hidden"></span>
    </div>
    <div class="form-group col-md-6 col-sm-6 col-lg-6 lname_group">
        <label>Last Name</label>
        <input type="text" name="reg_last_name" class="form-control reg_last_name" autocomplete="off">
        <span class="help-block lname_error hidden"></span>
    </div>
    <div class="form-group col-md-12 col-sm-12 col-lg-12 email_group">
        <label>Email</label>
        <input type="text" name="reg_email" class="form-control reg_email" autocomplete="off">
        <span class="help-block email_error hidden"></span>
    </div>
    <div class="form-group col-md-12 col-sm-12 col-lg-12 uname_group">
        <label>Username</label>
        <input type="text" name="reg_username" class="form-control reg_username" autocomplete="off">
        <span class="help-block uname_error hidden"></span>
    </div>
    <div class="form-group col-md-12 col-sm-12 col-lg-12 pword_group">
        <label>Password</label>
        <input type="password" name="reg_password" class="form-control reg_password">
        <span class="help-block pword_error hidden"></span>
    </div>
    <div class="form-group col-md-12 col-sm-12 col-lg-12 pword_again_group">
        <label>Confirm Password</label>
        <input type="password" name="reg_password_again" class="form-control reg_password_again">
        <span class="help-block pword_again_error hidden"></span>
    </div>
    <div class="radio col-md-12 col-sm-12 col-lg-12 gender_group">
        <label><input type="radio" class="reg_radio_male" name="reg_gender" value="Male"> Male</label>
        <label><input type="radio" class="reg_radio_female" name="reg_gender" value="Female"> Female</label>
        <span class="help-block gender_error hidden"></span>
    </div>
    <div class="form-group col-md-12 col-sm-12 col-lg-12">
        <input type="submit" value="Register" class="btn btn-default">
    </div>
</form>

的JavaScript

'use strict';

let $ = document.querySelector.bind(document);

class Validate {
    is_blank(field) {
        return $(field).value.length == 0;
    }
    exactPattern(field, pattern) {
        return $(field).value.match(pattern);
    }
    lessThanLength(field, textlength) {
        return $(field).value.length < textlength;
    }
    moreThanLength(field, textlength) {
        return $(field).value.length > textlength;
    }
    falseMatch(firstfield, secondfield) {
        return $(firstfield).value != $(secondfield).value;
    }
}

class Errors {
    addClass(field, className) {
        return $(field).classList.add(className);
    }
    removeClass(field, className) {
        return $(field).classList.remove(className);
    }
    displayError(span, errorMessage) {
        return $(span).innerHTML = errorMessage;
    }
}

let val = new Validate();
let err = new Errors();

function fnameError() {
    if(val.is_blank('.reg_first_name')) {
        err.addClass('.fname_group', 'has-error');
        err.removeClass('.fname_error', 'show');
        err.addClass('.fname_error', 'hidden');
    } else if(val.lessThanLength('.reg_first_name', 2)) {
        err.addClass('.fname_group', 'has-error');
        err.removeClass('.fname_error', 'hidden');
        err.addClass('.fname_error', 'show');
        err.displayError('.fname_error', 'Minimum: 2 characters');
    } else if(!val.exactPattern('.reg_first_name', /^[a-zA-Z ]*$/)) {
        err.addClass('.fname_group', 'has-error');
        err.removeClass('.fname_error', 'hidden');
        err.addClass('.fname_error', 'show');
        err.displayError('.fname_error', 'Enter a valid first name');
    } else {
        err.removeClass('.fname_group', 'has-error');
        err.removeClass('.fname_error', 'show');
        err.addClass('.fname_error', 'hidden');
    }
    return true;
}

function lnameError() {
    if(val.is_blank('.reg_last_name')) {
        err.addClass('.lname_group', 'has-error');
        err.removeClass('.lname_error', 'show');
        err.addClass('.lname_error', 'hidden');
    } else if(val.lessThanLength('.reg_last_name', 2)) {
        err.removeClass('.lname_group', 'has-error');
        err.removeClass('.lname_error', 'hidden');
        err.addClass('.lname_error', 'show');
        err.displayError('.lname_error', 'Minimum: 2 characters');
    } else if(!val.exactPattern('.reg_last_name', /^[a-zA-Z ]*$/)) {
        err.addClass('.lname_group', 'has-error');
        err.removeClass('.lname_error', 'hidden');
        err.addClass('.lname_error', 'show');
        err.displayError('.lname_error', 'Enter a valid last name');
    } else {
        err.removeClass('.lname_group', 'has-error');
        err.removeClass('.lname_error', 'show');
        err.addClass('.lname_error', 'hidden');
    }
    return true;
}

function emailError() {
    if(val.is_blank('.reg_email')) {
        err.addClass('.email_group', 'has-error');
        err.removeClass('.email_error', 'show');
        err.addClass('.email_error', 'hidden');
    } else if(!val.exactPattern('.reg_email', /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i)) {
        err.addClass('.email_group', 'has-error');
        err.removeClass('.email_error', 'hidden');
        err.addClass('.email_error', 'show');
        err.displayError('.email_error', 'Enter a valid email address');
    } else {
        err.removeClass('.email_group', 'has-error');
        err.removeClass('.email_error', 'show');
        err.addClass('.email_error', 'hidden');
    }
    return true;
}

function unameError() {
    if(val.is_blank('.reg_username')) {
        err.addClass('.uname_group', 'has-error');
        err.removeClass('.uname_error', 'show');
        err.addClass('.uname_error', 'hidden');
    } else if(val.lessThanLength('.reg_username', 6)) {
        err.removeClass('.uname_group', 'has-error');
        err.removeClass('.uname_error', 'hidden');
        err.addClass('.uname_error', 'show');
        err.displayError('.uname_error', 'Minimum: 6 characters');
    } else if(val.moreThanLength('.reg_username', 20)) {
        err.removeClass('.uname_group', 'has-error');
        err.removeClass('.uname_error', 'hidden');
        err.addClass('.uname_error', 'show');
        err.displayError('.uname_error', 'Maximum: 20 characters');
    } else if(!val.exactPattern('.reg_username', /^[a-zA-Z0-9]*$/)) {
        err.addClass('.uname_group', 'has-error');
        err.removeClass('.uname_error', 'hidden');
        err.addClass('.uname_error', 'show');
        err.displayError('.uname_error', 'Enter a valid username. No spaces');
    } else {
        err.removeClass('.uname_group', 'has-error');
        err.removeClass('.uname_error', 'show');
        err.addClass('.uname_error', 'hidden');
    }
    return true;
}

function pwordError() {
    if(val.is_blank('.reg_password')) {
        err.addClass('.pword_group', 'has-error');
        err.removeClass('.pword_error', 'show');
        err.addClass('.pword_error', 'hidden');
    } else if(val.lessThanLength('.reg_password', 8)) {
        err.removeClass('.pword_group', 'has-error');
        err.removeClass('.pword_error', 'hidden');
        err.addClass('.pword_error', 'show');
        err.displayError('.pword_error', 'Minimum: 8 characters');
    } else if(val.moreThanLength('.reg_password', 20)) {
        err.removeClass('.pword_group', 'has-error');
        err.removeClass('.pword_error', 'hidden');
        err.addClass('.pword_error', 'show');
        err.displayError('.pword_error', 'Maximum: 20 characters');
    } else if(!val.exactPattern('.reg_password', /^[a-zA-Z0-9]*$/)) {
        err.addClass('.pword_group', 'has-error');
        err.removeClass('.pword_error', 'hidden');
        err.addClass('.pword_error', 'show');
        err.displayError('.pword_error', 'Enter a valid password. No spaces');
    } else {
        err.removeClass('.pword_group', 'has-error');
        err.removeClass('.pword_error', 'show');
        err.addClass('.pword_error', 'hidden');
    }
    return true;
}

function pwordAgainError() {
    if(val.is_blank('.reg_password_again')) {
        err.addClass('.pword_again_group', 'has-error');
        err.removeClass('.pword_again_error', 'show');
        err.addClass('.pword_again_error', 'hidden');
    } else if(val.falseMatch('.reg_password_again', '.reg_password')) {
        err.removeClass('.pword_again_group', 'has-error');
        err.removeClass('.pword_again_error', 'hidden');
        err.addClass('.pword_again_error', 'show');
        err.displayError('.pword_again_error', 'Passwords do not match');
    } else {
        err.removeClass('.pword_again_group', 'has-error');
        err.removeClass('.pword_again_error', 'show');
        err.addClass('.pword_again_error', 'hidden');
    }
    return true;
}

function genderError() {
    if(!$('.reg_radio_male').checked && !$('.reg_radio_female').checked) {
        err.removeClass('.gender_group', 'has-error');
        err.removeClass('.gender_error', 'hidden');
        err.addClass('.gender_error', 'show');
        err.displayError('.gender_error', 'Gender is required');
    } else {
        err.removeClass('.gender_group', 'has-error');
        err.removeClass('.gender_error', 'show');
        err.addClass('.gender_error', 'hidden');
    }
    return true;
}

$('.reg_first_name').onblur = fnameError;
$('.reg_last_name').onblur = lnameError;
$('.reg_email').onblur = emailError;
$('.reg_username').onblur = unameError;
$('.reg_password').onblur = pwordError;
$('.reg_password_again').onblur = pwordAgainError;

$('.reg-form').onsubmit = function() {
    if(fnameError() && lnameError() && emailError() && unameError() && pwordError() && pwordAgainError() && genderError()) {
        return false;
    } else {
        return true;
    }
}

P.S：对于太多的课程名称感到抱歉，因为我正在使用bootstrap来设计表单。

Answer 1

首先，所有的..Error（）函数都返回 true ，无论 if -statements的结果如何。如果没有找到错误，您需要它们返回 false 。其次您正在使用＆amp;＆amp; （和）在.Error（）函数的调用之间。但是，即使只发生一个错误，您也希望返回 false 。要实现此目的，请改用 || （或）。

这应该可以解决你的困难。
注意：你也可以反过来做，所以如果发现错误，请返回 false 。您无需更改＆amp;＆amp;＆amp; ands，而是需要在 onsubmit中交换 false 和 true 功能。

迎接