AngularJs - 表单验证

最新推荐文章于 2020-03-09 16:01:05 发布

yxy_elena

最新推荐文章于 2020-03-09 16:01:05 发布

阅读量510

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/yxyCyndi/article/details/74391230

版权

angular 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文章翻译并个人总结于：
https://scotch.io/tutorials/angularjs-form-validation

我们更新了这篇文章为Angular 1.3和新的 ng-touched 的功能。
今天我们来看看Angular如何帮助我们进行表单验证。我们将更多地使用Angular表单（就像我们的其他文章：提交AJAX表单：AngularJS方式）。不用担心，该文章不是必需的。
我们将专注于客户端验证和使用内置的Angular表单属性。这是一个快速演示。
请参阅Chris Sevilleja（@sevilayha）上CodePen的Pen AngularJS表单验证

1.要求

name是必须项
userName是不需要的，最小长度是3，最大长度是8
Email 是不需要的，但必须是一个有效的电子邮件
如果表单无效（invalid），表单提交被禁用(disabled)
显示必需或无效的电子邮件错误
如果表单提交正确，alert awesome

现在我们知道我们想要什么，让我们来建设。

2.Angular表单属性


> $valid $invalid $pristine $dirty

Angular提供了有助于我们验证它们的表单上的属性。他们向我们提供有关表格或其输入的各种信息，并将其应用于表格(form)和输入(input)。

属性	类	描述
$valid	ng-valid	（布尔值）根据您放置的规则，指定某个项目当前是否有效。《字段有效》
$invalid	ng-invalid	（布尔值）根据您放置的规则，指定某个项目当前是否无效。《字段无效》
$pristine	ng-pristine	（布尔值）如果表单/输入尚未使用，则为True。《字段是否为更改》
$dirty	ng-dirty	(布尔值)如果表单/输入已经使用，则为true 《字段是否更改》
$touched	ng-touched	(布尔值)如果输入模糊，则为True。

Angular还提供表单及其输入上的类（class），以便相应地对每个状态进行style样式

访问Angular表单属性
访问 form：<form name>.<angular property>
要访问 input：<form name>.<input name>.<angular property>

相关其他课程：angular2.0angular2.0链接

我们将使用简单的表单来演示：
我们将需要2个文件：

index.html 我们的代码显示表单
app.js 我们的角色应用程序（application）和控制器(controller)（几乎没有任何代码）

代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单验证</title>
    <!--load bootstrap-->
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <!--load angular-->
    <script src="../../js/lib/angular.js"></script>
</head>
<!-- apply angular app and controller to our body -->
<body ng-app="app">
<div class="container" ng-controller="maincontroller">
    <h4>angularJs form validation</h4>
    <form name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate>
        <!--name-->
        <div class="form-group">
            <label>name</label>
            <input type="text" class="form-control" name="name" ng-model="name" required>
        </div>
        <!--username-->
        <div class="form-group">
            <label>username</label>
            <input type="text" class="form-control" name="username" ng-model="username" ng-minlength="3" ng-maxlength="8">
        </div>
        <!--email-->
        <div class="form-group">
            <label>email</label>
            <input type="email" class="form-control" name="email" ng-model="email">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>

</body>
</html>

<script>
    angular.module("app", []).controller("maincontroller", ["$scope", function ($scope) {
        $scope.submitForm =function(valid){

            alert("表单状态有效不"+valid);


        }
    }]);
</script>

注意事项：
1.novalidate：这将阻止默认的HTML5验证，因为我们将自己做（我们的将会更漂亮）
2.ng-model : 对我们的输入应用了ng-model，以便我们将表单中的数据与Angular变量绑定(双向绑定)
3.ng-minlength 和 ng-maxlength username将创建这些规则
4.input 的name属性是必须的
5.电子邮件input是 type =“email”
6.ng-submit = “expression”:如果我们的表单有效或无效，则传入变量(点击回车键也能提交)

禁用HTML5验证 novalidate

我们将在我们的表单上使用novalidate。这是一个很好的做法，因为我们将自己处理验证。如果我们让我们的表单做到这一点，它会看起来很丑陋。

这里写图片描述

禁用提交按钮ng-disabled

现在真正的乐趣开始了。我们开始使用角度属性。首先我们禁用我们的提交按钮。如果我们的表单$invalid，我们只希望它被禁用。

<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>

只要这个小代码（ng-disabled），如果表单$invalid(无效)，我们的表单按钮将被禁用。这意味着我们的name输入字段是必需的，我们的电子邮件输入字段需要有效的电子邮件。

显示错误讯息 ng-show

ng-valid和ng-invalid将根据您在表单中放置的规则自动确定输入是否良好。
如果我们的输入不是有效(invalid)的并且已经被使用（因为我们不想在使用它们之前不想显示错误），所以我们来看看并添加每个输入的错误消息。

<form name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate>
        <!--name-->
        <div class="form-group">
            <label>name</label>
            <input type="text" class="form-control" name="name1" ng-model="name1" required>
            <p ng-show="myForm.name1.$invalid && !myForm.name1.$pristine" class="help-block">请输入姓名</p>
            <p>{{myForm.name1.$invalid && !myForm.name1.$pristine}}</p>
        </div>
        <!--username-->
        <div class="form-group">
            <label>username</label>
            <input type="text" class="form-control" name="username" ng-model="username" ng-minlength="3" ng-maxlength="8">
            <p ng-show="myForm.username.$error.minlength" class="help-block">Username is too short.</p>
            <p ng-show="myForm.username.$error.maxlength" class="help-block">Username is too long.</p>
        </div>
        <!--email-->
        <div class="form-group">
            <label>email</label>
            <input type="email" class="form-control" name="email" ng-model="email" required>
            <p ng-show="myForm.email.$invalid && (!myForm.email.$pristine)">请输入邮箱</p>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>

更好的方法文章**

设计样式类

根据是否有效，Angular已经为我们的input和表格提供了类。请看本文开头的那些表（ng-valid，ng-invalid，ng-pristine和ng-dirty）。
如果你喜欢，你可以在CSS中设计样式。你可以用这些课程做任何你喜欢的事情。如果你想要真正具体的话，甚至会根据一些规则来应用课程。

.ng-valid       {  }
.ng-invalid     {  }
.ng-pristine    {  }
.ng-dirty       {  }
.ng-touched     {  }

/* really specific css rules applied by angular */
.ng-invalid-required        {  }
.ng-invalid-minlength       {  }
.ng-valid-max-length        {  }

添加条件类ng-class
由于我们使用Bootstrap，我们将使用它们提供的类（has-error）。这将让我们看到我们的表单组中的漂亮的错误和颜色。
ng-class允许我们根据表达式添加类。在这种情况下，如果输入为$ invalid而不是pristine，则我们要向form-group添加一个has-error类。
它的工作原理是ng-class =“{：<表达要评估>}”。有关更多信息，请阅读Angular ngClass文档。

仅在提交表单后显示错误

有时在用户输入时显示错误是不可取的。当用户正在键入表单时，这些错误立即显示。这是因为Angular的很好的数据绑定功能。由于一切都会立即改变，所以在谈论表单验证时可能会是一个缺点。

对于您只希望在提交表单后出现错误的情况，您可以稍微调整上述代码。
1.因为我们希望用户能够提交表单，即使它不完全有效，您需要在提交按钮上删除ng-disbaled。
2.您将在表单提交后添加一个变量。在你的submitForm（）函数的内部，只需添加$ scope.submitted = true ;. 一旦表单提交，它将提交的变量存储为true。
3.调整错误规则
从ng-class =“{'has-error'：userForm.name.$ invalid &&！userForm.name.$ pristine}”到ng-class ="{'has-error'：userForm.name. $ invalid &&！userForm.name.$ pristine && submitted"。这样可以确保错误只会在表单提交后显示。您需要调整所有其他ng-class和ng-show以考虑此变量。

只显示输入后出现错误

ng-touched

总结

只需几条简单的线条，我们现在有：
输入验证
形式错误
自定义类
自动禁用和启用表单
自定义规则
您可以看到，使用内置角度验证技术很容易创建客户端验证的表单。

未来

就这样，在用户点击输入后进行验证不是一个简单的过程。 Angular团队意识到这一点，他们表示他们计划添加更多的状态来处理form.submitted，input.$ visited，input.$ blurred或input.$ touched。
以下是未来表单验证的一些资源：
Github问题
 ngForm模块的想法

希望更快，而不是稍后，将更容易做出验证，并说明我们应用程序的不同状态。
编辑＃
1：添加了在表单提交或模糊之后验证的信息。还增加了资源。编辑＃
2：更改过程表单函数以获取有效参数。有助于创建可测试的控制器。感谢Fredrik Bostrom的提示。

本文是AngularJS Forms系列的一部分。
提交AJAX表单：AngularJS方式
AngularJS表单验证（本文）
处理角色表格中的复选框和单选按钮

yxy_elena

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs - 表单验证

本文章翻译并个人总结于： https://scotch.io/tutorials/angularjs-form-validation我们更新了这篇文章为Angular 1.3和新的 ng-touched 的功能。今天我们来看看Angular如何帮助我们进行表单验证。我们将更多地使用Angular表单（就像我们的其他文章：提交AJAX表单：AngularJS方式）。不用担心，该文章不是必需的
复制链接

扫一扫