AngularJS学习记录-表单验证

最新推荐文章于 2020-12-18 18:49:40 发布

原创最新推荐文章于 2020-12-18 18:49:40 发布 · 636 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angularjs #表单

Angular学习专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了AngularJS中表单验证的方法，包括如何使用AngularJS的属性来验证表单控件的状态，并提供了针对表单中checkbox和radio控件的使用技巧。通过实例演示了如何在AngularJS应用中实现表单验证与控件交互。

AngularJS学习记录-表单验证

表单是各类控件（例如input、select、textarea等）的集合体，是DOM中非常重要的数据交互元素，在angularJS中也对基本的验证功能有所封装

angular中，专门对表单的控件提供了以下的属性用于验证控件交互值的状态：

$pristine 表示表单或控件内容是否未输入过。
$dirty 表示表单或控件内容是否已输入过。
$valid 表示表单或控件内容是否已验证通过。
$invalid 表示表单或控件内容是否未验证通过。
$error 表示表单或控件内容验证时的错误提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <script src="../js/angular.min.js"></script>
    <style>
        body{
            font-size:12px;
        }
        input{
            padding:3px;
        }
    </style>
</head>
<body ng-app="app">

<form name="myForm" ng-submit="save()" ng-controller="myCtr">
    <!--姓名-->
    <div>
        <input type="text" name="name" ng-model="name" required>
        <span ng-show="myForm.name.$error.required">姓名不能为空</span>
    </div>
    <!--邮箱-->
    <div>
        <input type="text" name="email" ng-model="email" required>
        <span ng-show="myForm.email.$error.required">邮箱不能未空</span>
    </div>
    <!--提交-->
    <input type="submit" ng-disabled="myForm.$invalid" value="提交">


</form>

<script>
    var app = angular.module('app',[]);

    app.controller('myCtr',['$scope',function($scope){

        $scope.name = "";
        $scope.email = "";
        $scope.save = function(){
          console.log("提交成功！");
        };

    }])

</script>
</body>
</html>

在代码片段中，如果要使用angular中提供的表单控件的验证方法，必须要绑定model，否则无法使用。

表单中的checkbox和radio控件

在表达控件中，checkbox和radio控件与input元素的其他类型控件不同，这两个控件不具有angular的控件验证功能，而且checkbox有选中和非选中两种状态，而radio只有一种选中状态。checkbox控件和radio控件都可以通过“ng-model“指令绑定控制器的属性，一旦绑定成功，在首次加载时，将以绑定的属性值作为控件初始化的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <script src="../js/angular.min.js"></script>
    <style>
        body{
            font-size:12px;
        }
        div{
            margin:8px 0;
        }
    </style>
</head>
<body ng-app="app">

<form name="myForm" ng-submit="save()" ng-controller="myCtr">

    <div>
        <input type="checkbox" ng-model="check" ng-true-value="'同意'" ng-false-value="'不同意'"/>{{check}}
    </div>

    <div>
         性别：
       <input type="radio" ng-model="six" ng-value="'男'">男
       <input type="radio" ng-model="six" ng-value="'女'">女
    </div>

 <input type="submit" value="提交">
 <div>{{c}}</div>

</form>

<script>
 var app = angular.module('app',[]);

 app.controller('myCtr',['$scope',function($scope){

     $scope.check = "同意";
     $scope.six = "男";
     $scope.save = function(){
       $scope.c = "您选中的是" + $scope.check + "+" + $scope.six;
     };

 }])

</script>


</body>
</html>

通过以上例子发现checkbox有两个属性是非常有用的，一个ng-true-value和ng-false-value，分别代表是选中和未选中是分别的值是什么，然后通过双向数据绑定，实现更改绑定变量的值。另外单选框也有可以用ng-value去绑定对应的值，因为radio没有required属性，没办法做必填校验，所以最好初始化的时候默认选中一个。

更多可参考以下这边文章：
https://segmentfault.com/a/1190000002632671