zoukankan      html  css  js  c++  java
  • AngularJS表单验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证。

    手动验证:

    是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件:1、给form元素加上novalidate="novalidate";2、给form元素加上name="theForm".

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate="novalidate">
            <p>
                用户名
                <input type="text" name="user" ng-model="user" required/>
                <span style="color:red" ng-show="myForm.user.$error.required">必填项</span>
            </p>
        </form>
    </body>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('validateCtrl',function($scope){
            $scope.user = 'dddddd'
        })
    </script>
    </html>
    

      

    ● 给form加上novalidate="novalidate"意味着表单将不再使用HTML5验证特性
    ● 给form加上name="theForm"意味着表单的名称是theForm。如何使用theForm,比如我们验证表单是否被修改过theForm.$submitted
    ● 通过ng-submit提交表单
    ● formModel是$scope中的一个属性
    ● 对表单的Email进行了手动验证,使用了AngularJS表单的众多属性,比如theForm.email.$valid,theForm.$pristine,theForm.$submitted, theForm.email.$error.required,theForm.email.$error.email
    ● 通过<pre>{{theForm | json}}</pre>把AngularJS表单的所有属性都打印出来

  • 相关阅读:
    第四周作业
    第三周作业
    第二周基础作业
    抓老鼠
    币值转换
    打印沙漏
    秋季学期学习总结
    2019春第七周作业
    2019春第六周作业 学习总结
    第五周作业总结以及学习总结
  • 原文地址:https://www.cnblogs.com/zhangym118/p/7427087.html
Copyright © 2011-2022 走看看