如何使用 angularjs 验证特定的输入字段？答案

【问题标题】：how to validate particular input field using angularjs?如何使用 angularjs 验证特定的输入字段？
【发布时间】：2016-02-23 18:23:20
【问题描述】：

我正在尝试使用 angularJS 验证一些输入字段。我找到了一些例子。但他们正在验证整个表格。

<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform">
        <input type="text" ng-model='name' ng-required="true" />
        <input type="password" ng-model='password' ng-required="true" />
        <button ng-click="myform.$valid && preview()">Preview</button>
        <button ng-click="myform.$valid && update()">Update</button>
    </form>

</div>

控制器代码是

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name=undefined;
    $scope.preview = function(){
        alert("Previewed");
    };
    $scope.update = function(){
        alert("Updated");
    }
});

以上代码根据表单名称验证字段。但我想知道有什么方法可以验证特定的输入字段吗？

【问题讨论】：

方法很多，但究竟是不是想要的结果？
通过验证，您的意思是验证您的输入内容是否用于例如一个数字、一个特定的字符串等？

标签： html angularjs validation

【解决方案1】：

DEMO 是的，您可以，您必须为输入指定 name，例如

<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform">
        <input type="text" name='name' ng-model='name' ng-required="true" />
        <input type="password" ng-model='password' ng-required="true" />
        <button ng-click="myform.$valid && preview()">Preview</button>
        <button ng-click="myform.$valid && update()">Update</button>
    </form>

</div>

然后您可以检查name 是否与myForm.name.$valid 有效

【讨论】：

【解决方案2】：

看看小提琴here。

只需将name 添加到input 字段，然后按照与form 相同的操作即可。

HTML：

<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform">
        <input type="text" ng-model='name' ng-required="true" name="txtName" />
        <input type="password" ng-model='password' ng-required="true" />
        <button ng-click="myform.$valid && preview()">Preview</button>
        <button ng-click="myform.$valid && update()">Update</button>
        <div>Status of name: <span style="color: blue">{{myform.txtName.$valid}}</span></div>

    </form>

</div>

JS：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.name = undefined;
    $scope.preview = function () {
        alert("Previewed");
    };
    $scope.update = function () {
        alert("Updated");
    }
});

【讨论】：