gpt4 book ai didi

angularjs ng-minlength 验证不起作用,表单仍在提交

转载 作者:行者123 更新时间:2023-12-02 19:43:31 25 4
gpt4 key购买 nike

我尝试仅在验证成功时提交表单。验证适用于 required 但不适用于 ng-minlength

表单输入无效,但表单仍在提交中。

<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>

<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>

count: {{count}}<br />

<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>

http://jsfiddle.net/pMMke/9/

我做错了什么。

我不想使用提交按钮禁用方法。

最佳答案

这就是你做错的地方:你混合了两个概念,Angular validatorsHTML5 validators

例如,必需的 HTML5 验证器规定:

When present, it specifies that an input field must be filled out before submitting the form.

因此,如果您尝试提交具有此属性的输入的表单,它将显示一条消息向用户解释这一点,并且会阻止发送该表单。这就是您想要的行为。为什么 ng-minlength 不起作用?因为 ng-minlength 是一个 Angular 验证器(您可以看出,因为它以 ng- 开头),并且它不会向表单添加任何特殊行为。它只是将其所在的输入设置为无效(因此,表单),然后让您决定如何处理它。

您有一个选择:您可以使用模式 HTML5 验证器来指定字段需要至少 11 个字符。它会像这样:

<input type="text" pattern=".{11,}">

因此,当您提交包含此输入的表单时,如果用户输入的字符少于 11 个字符,则不会发送该表单。

但是既然我们就是这样,并且您已经在使用模式验证器,那么您可以充分利用正则表达式的潜力,并定义如下内容:

<input type="text" pattern="07[0-9]{9}" />

它只接受 11 个字符的值,以“07”开头并且仅包含数字。我已经修改了你的 fiddle 以向你展示它是如何工作的:http://jsfiddle.net/helara/w35SQ/

关于angularjs ng-minlength 验证不起作用,表单仍在提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18516001/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com