AngularJS验证不起作用?

时间:2015-01-15 07:46:16

标签: javascript angularjs validation

我是AngularJS的新手,我刚刚开始调整它附带的验证,但由于某些原因我无法让它们工作:

<div class="row">
    <div class="col-xs-6">
        <h2>Login</h2>
        <p class="text-danger">{{message}}</p>
        <form name="form" novalidate>
            <label>Email: </label>
            <input type="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
            <label>Password: </label>
            <input type="password" ng-model="credentials.password" placeholder="Password" class="form-control" />
            <br />
            <button class="btn btn-primary" ng-click="authenticate(credentials)">Login</button>
            <a href="#/register">Register</a>
        </form>
    </div>
</div>

我将表单命名为novalidate。然后我尝试根据需要输入电子邮件,但将属性放在那里。但表格仍然提交,AngularJS不会阻止它提交或显示任何警告。我错过了什么?

2 个答案:

答案 0 :(得分:1)

为您的输入提供名称字段

 <form name="form" novalidate>
            <label>Email: </label>
            <input type="email" name="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
            <label>Password: </label>
            <input type="password" ng-model="credentials.password" placeholder="Password" class="form-control" />
            <br />
            <button class="btn btn-primary" ng-disabled="form.$invalid" ng-click="authenticate(credentials)">Login</button>
            <a href="#/register">Register</a>
        </form>

这是吸虫:-) http://plnkr.co/edit/pAA2wBp8zgIZV6QLwO7S?p=preview

答案 1 :(得分:0)

如果您想要选择,请从电子邮件输入中删除required属性。

<input type="email" ng-model="credentials.email" placeholder="Email" class="form-control"/>

如果要删除电子邮件验证,请更改字段类型。

如果您制作type="email"

,HTML5始终会验证电子邮件
<input type="text" ng-model="credentials.email" placeholder="Email" class="form-control"/>