AngularJS的简单表单验证

代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCheckSimpleForm.rar

代码:

AngularJS的简单表单验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl"> 
    <form ng-submit="ctrl.submit()" name="myForm">
        <table>
            <tr>
                <td><input type="text" name="uname" ng-model="ctrl.user.username" required ng-minlength="4"/></td>
                <td>
                    <span ng-show="myForm.uname.$error.required">This a required field</span>
                    <span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span>
                    <span ng-show="myForm.uname.$invalid">This field is invalid</span>
                </td>
            </tr>
            <tr>
                <td><input type="password" name="pwd" ng-model="ctrl.user.password" required/></td>
                <td>
                    <span ng-show="myForm.pwd.$error.required">This a required field</span>
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td>
                <td>
            </tr>
        </table>
    </form>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.submit=function(){
            console.log("Username="+self.user.username+" Password="+self.user.password);
            alert("Form submitted.");
       };
       
     }]);
//-->
</script>
AngularJS的简单表单验证

效果:

输入前:

AngularJS的简单表单验证

输入后:

AngularJS的简单表单验证

 














本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7418300.html,如需转载请自行联系原作者

上一篇:Spring MVC 中重定向 及 重定向源码跟踪


下一篇:.Net Micro Framework研究—带IO的模拟器