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

一尘不染

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

angularjs

我正在尝试仅在成功验证后提交表格。验证适用于必填项，但不适用于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/

我究竟做错了什么。

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

阅读 231

2020-07-04

共1个答案

一尘不染

这是您做错的事情：您正在混合使用两个概念Angular验证器
和 HTML5验证器。

在需要 HTML5验证，例如，规定：

如果存在，它指定提交表单之前必须填写输入字段。

因此，如果您尝试提交具有此属性输入的表单，它将向用户显示一条解释此消息的消息，并且将阻止发送表单。这是您想要的行为。为什么不为 ng-
minlength工作？因为 ng-minlength 是Angular验证器（您可以知道，因为它以 ng-开头
），并且它没有在表单中添加任何特殊行为。它只是将输入所在的位置设置为无效（因此也就是表单），然后让您决定如何处理它。

您可以选择：您可以使用模式 HTML5验证器，以指定该字段至少需要11个字符。它将是这样的：

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

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

但是既然如此，您已经在使用模式验证器，则可以充分利用正则表达式，并定义如下内容：

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

它将只接受11个字符的值，以“
07”开头且仅包含数字。我已经修改了您的小提琴以向您展示它如何工作：http :
//jsfiddle.net/helara/w35SQ/

2020-07-04