【问题标题】：how to validate form using name or id attribute in angular Js如何在 Angular Js 中使用名称或 id 属性验证表单
【发布时间】：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])
            ....

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

【问题讨论】：

标签： javascript jquery html angularjs forms

【解决方案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。