AngularJS的简单表单验证

简介:

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

代码:

复制代码
<!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>
复制代码

效果:

输入前:

输入后:

 














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

相关文章
|
10月前
|
前端开发 JavaScript 测试技术
angularjs初识
angularjs初识
53 0
|
JavaScript 前端开发 数据安全/隐私保护
|
数据格式 JSON JavaScript
|
Web App开发 Java 测试技术
|
JSON JavaScript 前端开发
|
数据安全/隐私保护
|
JavaScript 前端开发 开发者
|
Web App开发 JavaScript 前端开发

热门文章

最新文章