Question

在Angularjs表格中，Email-Id和密码的验证无效。请查看下面的代码段。

    <div class="field_w3ls">
        <div class="field-group">                     
            <input type="text" name="email"  placeholder="Email" id="email" class="form-control" ng-model="email"  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required />
            <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            <span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">Email is required</span>
        </div>
    </div>
    <div class="field_w3ls"> 
        <div class="field-group">                       
            <input type="password" name="password"  placeholder="Password" id="password" class="form-control" ng-model="password" required />
            <span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>       
        </div>
    </div>

但是，当我们删除 ng-model 时它的工作正常。我是AngularJs的新手。

提前致谢!!

Answer 1

在表单标记中提供novalidate，请查看此代码

    <form name="form" novalidate>
    <div class="field_w3ls">
            <div class="field-group">                     
                <input type="text" name="email"  placeholder="Email" id="email" class="form-control" ng-model="email"  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required/>     
                <span ng-if="form.email.$dirty && form.email.$invalid" class="help-block">
                  <span ng-show="form.email.$error.required">Email is required</span>
                  <span ng-show="form.email.$error.pattern">Invalid email</span>
                </span>
            </div>
        </div>
        <br/>
        <div class="field_w3ls"> 
            <div class="field-group">                       
                <input type="password" name="password"  placeholder="Password" id="password" class="form-control" ng-model="password" required />
                <span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>             
<span ng-if="form.password.$dirty && form.password.$invalid" class="help-block">
               <span ng-show="form.password.$error.required">password is required
</span>
                </span>
            </div>
        </div>
    </form>

**在控制器中给**

$scope.email = '';
$scope.password = '';

Answer 2

将您的表单命名为name="loginForm"，并在表单电子邮件字段中检查$invalid，因为您要验证所需和模式。

<form name="loginForm" novalidate>
    <div class="field_w3ls">
        <div class="field-group">                     
            <input type="text" name="email"  placeholder="Email" id="email" class="form-control" ng-model="email"  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required />
            <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            <span ng-show="loginForm.email.$dirty && loginForm.email.$invalid" class="help-block">Email is required</span>
        </div>
    </div>

    <div class="field_w3ls"> 
        <div class="field-group">                       
            <input type="password" name="password"  placeholder="Password" id="password" class="form-control" ng-model="password" required />
            <span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>       
        </div>
    </div>
</form>

输入类型未验证AngularJs Html中的验证

2 个答案: