向输入字段添加自定义验证答案

【问题标题】：Adding custom validation to input field向输入字段添加自定义验证
【发布时间】：2016-07-17 17:17:14
【问题描述】：

我正在尝试对我的文本输入类型添加自定义验证。顺便说一句，我正在使用 Angular。

代码如下：

<div class="form-group">
  <label class="control-label">text</label>
  <input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text" required>
  <p class="form-group-note">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

我想添加 2 个验证：1) 它不能为空 2) 文本的最小长度是 6 个字符。我希望在按下我的网络应用上的提交按钮时触发此验证。

感谢任何建议！

【问题讨论】：

if(string.length > 5){}?至于什么时候被调用，你还没有提供和JS代码，那你就靠你自己了。

标签： javascript html angularjs validation

【解决方案1】：

您可以使用 HTML 输入标记属性来实现这一点。

<input type="text" pattern="^.{5,}" required>

required 属性告诉输入不能为空

pattern="^.{5,}" 防止输入少于 6 个字符。

如果您的 <input> 位于 <form> 中，则会触发此验证，例如：

<form action="">
  <input type="text" pattern="^.{5,}" required>
  <input type="submit">
</form>

如果您想了解有关该主题的更多信息，请参阅MDN

【讨论】：

一个很好的解决方案，但在一些浏览器上有点不可靠（Safari 和旧版的 IE，如果你运气不好的话）：caniuse.com/#search=pattern 就我个人而言，我仍然会坚持使用 JS 验证，直到Safari 迎头赶上。

【解决方案2】：

试试这个希望它会工作

   <input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text" required>

控制器：

   $scope.submit = function() {
        if ($scope.formData.text) {
            if ($scope.formData.text.length >= 6) {

                //save code
            } else {
                $scope.errormessage = "Min length failed ,it should be greater than 5"

            }
        } else {
            $scope.errormessage = "Textfield Empty"
        }
    };

【讨论】：

【解决方案3】：

在输入时使用 ng-minlength 进行验证，

 &lt;input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text" required="required" ng-minlength="6"&gt;

仅在按下按钮后才生效，

 <input type="text" name="text" class="form-control" id="text_test" ng-blur="saveProgress()" ng-model="formData.text" placeholder="Any text"> 


<button ng-click="submit()"/>

在你的控制器上：

 $scope.submit = function() {
        if ($scope.formData.text) {
            if ($scope.formData.text.length >= 6) {

                //save code
            } else {
                $scope.errormessage = "Min length should be greater than 5"

            }
        } else {
            $scope.errormessage = "Text field is required"
        }
    };

【讨论】：