正在向输入字段添加自定义验证

Adding custom validation to input field

本文关键字：添加 自定义 验证 字段 输入      更新时间：2023-09-26

我正在尝试为文本类型的输入添加自定义验证。我使用的是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>

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

欢迎提出任何建议！

您可以通过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

试试这个，希望它能在中工作

   <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"
        }
    };

要在键入时进行验证，请使用ng minlength，

 <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">

要仅在按下按钮后进行验证，

 <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"
        }
    };

相关文章：