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表单的所有属性都打印出来

  • 相关阅读:
    AtCoder Grand Contest 015 题解
    AtCoder Grand Contest 014 题解
    AtCoder Grand Contest 013 题解
    AtCoder Grand Contest 012 题解
    AtCoder Grand Contest 011 题解
    AtCoder Grand Contest 010 题解
    AtCoder Grand Contest 009 题解
    NOIP2017 Day2 题解
    博客园主题备份
    多项式全家桶
  • 原文地址:https://www.cnblogs.com/zhangym118/p/7427087.html
Copyright © 2011-2022 走看看