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

  • 相关阅读:
    SQLite基本(实例FileOrganizer2013.5.12)
    MongoDB常见问题
    Node.js
    Linux安装indicator-china-weather
    Hadoop常见问题
    Hadoop HDFS文件操作
    Ubuntu下载、zsync、安装、常见问题
    Mongo-Hadoop
    Mongo JavaTest
    MongoDB 快速入门
  • 原文地址:https://www.cnblogs.com/zhangym118/p/7427087.html
Copyright © 2011-2022 走看看