如何在 Angular Js 中使用名称或 id 属性验证表单

Posted 2023-05-09

技术标签:

【中文标题】如何在 Angular Js 中使用名称或 id 属性验证表单【英文标题】：how to validate form using name or id attribute in angular Js 【发布时间】：2016-12-06 04:14:58 【问题描述】：

在表单中，我有带有名称、id 和类属性的控件。我不能在 html 输入元素中添加任何 costom 属性。在这种情况下，我该如何应用验证。

我可以在元素名称或 id 上写指令吗？

HTML

<form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit(DTOstep1)" novalidate>
<input name="userinput1" id="userinput1" class="" />
<input name="userinput2" id="userinput2" class="" />
<input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" />
</form>

指令代码

(function () 
    "use strict";

    angular
            .module("autoQuote")
            .directive('userinput1', [userinput1])
            ....

或者有没有其他方法可以进行表单验证。我想对每个表单字段应用一些自定义验证。

【问题讨论】：

【参考方案1】：

angular way 要求每个字段具有 ng-model 属性，以便将其与模型属性绑定。

function TestCtrl($scope) 
  $scope.fields = 
    "userinput1" : "Initial Value",
    "userinput2" : ""
  
  
  $scope.onSubmit = function onFormSubmit($event, form) 
    if(form.$invalid) 
      console.log("invalid", form);
      event.preventDefault();
      return;
    
    
    console.log('valid', form);
    //send here
  ;

angular
  .module('test', [])
  .controller("TestCtrl", ["$scope", TestCtrl])
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
  <article ng-controller="TestCtrl">
    <form name="DTOstep1" ng-submit="onSubmit($event, DTOstep1)">
      
      <input name="userinput1" ng-model="fields.userinput1" required/>
      <input name="userinput2" ng-model="fields.userinput2" required />
      
      <input name="saveDto" type="submit" ng-disabled="DTOstep1.$pristine || DTOstep1.$invalid" />
</form>
  </article>
</section>

顺便说一下，如果您无法编辑视图以创建 angular-form，则需要通过 dom 查询来控制表单，例如 vanilla javascript... 使用 @ 987654325@ 并检查value 属性。

更新

可以使用简单的程序方法进行许多基本检查，如果您想将 minlength 应用于 userinput1 字段，则需要在每个 onSubmit 上检查 $scope.fields.userinput1.length > ... 等等...

更简洁和建议的方法是使用 html5 验证属性， angular 装饰它们并识别它们的规则，因此，您可以使用min/max/min-length/max-length/required/pattern/disabled 等。

如果您想提供一种可重用的方式，您应该看看FormController.$addControl 或如何通过需要ngModelController 的属性构建自定义指令等等...

【讨论】：

使用 TestCtrl 和 ng-model 很有帮助。如何在此处对输入应用验证？我可以制定可以应用于字段的规则，以便我们可以在需要时为多个字段重用规则。如果我将属性设置为 myInput="userinput1" 和下一个 myInput="userinput2"。那么我可以对 myInput 属性值应用验证。 myInput 属性不存在...你的意思是什么？自定义指令？为了做什么？【参考方案2】：

将必填添加到您要添加验证的那些字段 -

'use strict';
 var app = angular.module("demo", [], function($httpProvider) 

);

app.controller("demoCtrl", function($scope) 
    $scope.onSubmit = function()
      alert('form valid');
      

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<div ng-controller="demoCtrl">
<form name="form" id="form" class="form-horizontal text-center" role="form" >
<input ng-required="true" ng-model="userinput1" name="userinput1" id="userinput1" class="" /><br>
Check it to make userinput 2 required:  <input type="checkbox" ng-model="check" />
<input  ng-required="check" ng-model="userinput2" name="userinput2" id="userinput2" class="" />
<br><input ng-click="onSubmit(DTOstep1)" ng-disabled="form.$invalid" name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" /><br>
</form>
  </div>
</body>

您还可以在 ng-required 中使用 ng-model 来切换 ng-required 的真假。

【讨论】：

需要所有字段。我想应用一些自定义验证。我不明白你的回答。你能解释一下吗？你想要什么样的自定义验证？类似于检查集合中的值。或从服务器调用（Ajax）验证我添加了复选框验证只是为了演示目的，它可以像你想要的一样复杂，对于服务器验证，你必须在控制器 onsubmit 函数中进行【参考方案3】：

angular 会自动为每个 ng-model 添加分类

这应该会有所帮助 https://docs.angularjs.org/guide/forms

以添加小提琴为例

https://jsfiddle.net/x0f6czfk/

<body ng-app="app">
  <form ng-controller="mainCtrl">
    <input ng-model="name" type="text">
    <input ng-model="email" type="text">
    <input type="button" ng-click="validateForm()" value="Save">
  </form>
</body>

(function(window,document,undefined)
var app = angular.module('app',[]);


  app.controller('mainCtrl',function($scope)
    var self = this;
    $scope.validateForm = function()
    //custom validation
        if($scope.name === 'test')
        console.log('wrong name');
        return;
      
     //custom validation
     if($scope.email === 'test@demo.com')
                console.log('wrong email');
          return;
        
      else
      //if no validation error, submit data;
        console.log('valid form');
      
    
  );
)(window,document)

【讨论】：

是的，但是这些类对于所有控件都是相同的。如何区分每个字段。就像我只想应用验证表单 userinput1。

以上是关于如何在 Angular Js 中使用名称或 id 属性验证表单的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Angular 应用程序中使用 Node.js“Net”类（或其他 TCP 后端）

在Angular外部使用js调用Angular控制器中提供的函数方法或变量

Angular.js：如何根据字符长度动态减小字体大小？

使用id名称和name直接获取元素

如何检测 angular.js 中的 keydown 或 keypress 事件？

Django：如何在 Jquery 中使用 $getJSON 或在 Angular.js 中使用 $http.get 接收 QuerySet？