javascript - 验证电子邮件后如何启用复选框？

Question

我想知道如何仅在电子邮件被验证为有效时启用该复选框。只有在填写了所有字段后，我才能启用该复选框，但我希望在电子邮件有效之前禁用它。

HTML

  <div class="form-group">
                        <label for="inputNome" class="col-lg-2 control-label" ng-class="{'text-white': invertTextColor}">Nome</label>
                        <div class="col-lg-10">
                            <input type="text" class="form-control" id="inputNome" name="inputNome" placeholder="Nome"
                                   ng-class="{'text-white': invertTextColor}" ng-model="user" required onkeyup="changeDetected()"/>

                            <div ng-messages="guestForm.inputNome.$error" style="color:red" role="alert" ng-show="formSubmitted">
                                <div ng-message="required">É necessário um nome.</div>
                            </div>
                        </div>
                        <label for="inputCPF" class="col-lg-2 control-label" ng-class="{'text-white': invertTextColor}">CPF</label>
                        <div class="col-lg-10">
                            <input type="text" class="form-control" id="inputCPF" name="inputCPF" placeholder="CPF" ng-class="{'text-white': invertTextColor}" ng-model="cpf" maxlength="11" required onkeyup="changeDetected()"/>
                            <div ng-messages="guestForm.inputCPF.$error" style="color:red" role="alert" ng-show="formSubmitted">
                                <div ng-message="required">É necessário um CPF.</div>
                            </div>
                        </div>
                        <label for="inputPhone" class="col-lg-2 control-label" ng-class="{'text-white': invertTextColor}">Telefone</label>
                        <div class="col-lg-10">
                            <input type="text" class="form-control" id="inputPhone" name="inputPhone" placeholder="(11)999999999" ng-class="{'text-white': invertTextColor}" ng-model="phone" maxlength="11" required onkeyup="changeDetected()"/>
                            <div ng-messages="guestForm.inputPhone.$error" style="color:red" role="alert" ng-show="formSubmitted">
                                <div ng-message="required">É necessário um Telefone.</div>
                            </div>
                        </div>
                        <label for="inputEmail" class="col-lg-2 control-label" ng-class="{'text-white': invertTextColor}">Email</label>
                        <div class="col-lg-10">
                            <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email"
                                   ng-class="{'text-white': invertTextColor}" ng-model="email" required onkeyup="changeDetected()"/>

                            <div ng-messages="guestForm.inputEmail.$error" style="color:red" role="alert">
                                <div ng-message="email">É necessário um e-mail válido.</div>
                            </div>
                            <div ng-messages="guestForm.inputEmail.$error" style="color:red" role="alert" ng-show="formSubmitted">
                                <div ng-message="required">É necessário um e-mail.</div>
                                <div ng-message="email">É necessário um e-mail válido.</div>
                            </div>
                        </div>


                    </div>

JavaScript

 function changeDetected(){
  name = $('#inputNome').val()
  cpf = $('#inputCPF').val()
  phone = $('#inputPhone').val();
  email = $('#inputEmail').val();


  if ((name.length > 0) && (cpf.length > 0) && (phone.length > 0) && (email.length > 0)) {
    $('#eula').removeAttr('disabled');
  } else {

    $('#eula').attr('disabled', 'disabled');
  }
}

标签： javascripthtml

Answer 1

只需将if逻辑更改为：

function validateEmail(email){
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    }
if (((email.length > 0) && validateEmail(email)) && ((name.length > 0) && (cpf.length > 0) && (phone.length > 0))) {
    $('#eula').removeAttr('disabled');
} else {
    $('#eula').attr('disabled', 'disabled');
}