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');
  }
}

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');
}

Answer 2

看看jQuery.validate，您可能应该得到一些解决办法

Answer 3

这完全可以完全不用jQuery而完全可以使用内置指令中的AngularJS完成。结合使用ngModel和ngDisabled，您可以检查表单元素是否为基于save.php / $valid的验证属性，例如$invalid和required您的输入元素。这种方法将实时响应控制器的$ scope和AngularJS生命周期中的更改，而无需使用jQuery进行手动DOM操作。这将与forms的AngularJS方法保持一致。它还将使其可测试。我提供了一个小样本，您应该可以使用此样本将其应用于其余的元素和逻辑。

HTML：

minLength

控制器：

<input type="text" name="inputNome" id="inputNome" ng-model="inputNome" required />
<input type="text" name="inputEmail" id="inputEmail" ng-model="inputEmail" required />
<input type="checkbox" name="eula" id="eula" ng-disabled="!isEnabled(form)" />

您可以通过使用命名形式的任何输入上的属性来检查任何输入的有效性。 JSON值类似于以下内容。请注意，您检查了许多属性，包括是否触摸了表单控件，它是否有效等等。错误以$scope.isEnabled = function(form) { return !form.email.$invalid && !form.inputNome.$invalid; }属性的对象形式提供。

$error

这里是Plunker来演示功能。请注意，在两个输入均变为有效之前，该复选框已禁用。您可以使用任意数量的元素和任何验证（例如最小长度）来完成此操作。

Answer 4

您现在唯一的电子邮件验证是检查它是否包含多个条目（基本上是查看它是否为空）。如果您想进行完整的电子邮件验证，则可能还需要一个正则表达式来检查电子邮件是否符合实际电子邮件的常规语法。

但是，如果一切正常，并且您只想进行验证，但是希望复选框逻辑仅围绕电子邮件验证，那么您要做的就是重新构建ancient()有点逻辑。

示例：

if else

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

4 个答案: