代码下载：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>

效果：

输入前：

输入后：

AngularJS的简单表单验证的更多相关文章

  1. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  2. angularJS中的表单验证（包括自定义验证）

    表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...

  3. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  4. 如何利用jQuery进行简单表单验证

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  5. AngularJS入门基础——表单验证

    <form name="form" novalidata>   <label name="email">your email</l ...

  6. jq之简单表单验证

    <body> <form method="post" action=""> <div class="int"& ...

  7. 自制简单表单验证relative与absolute定位

    html结构,用到了label与span <label class="relative"><input type="text" name=&q ...

  8. 夺命雷公狗—angularjs—2—模拟表单验证

    这里我们就来借助妹子ui来搭建下模版,废话不多说,代码如下图所示: <!doctype html> <html lang="en"> <head> ...

  9. 关于ajax用户名验证和jquery实现简单表单验证

    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...

随机推荐

  1. [POJ 1002] 487-3279 C++解题报告

        487-3279 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 228365   Accepted: 39826 D ...

  2. 4.Vim编辑器与Shell命令脚本

    第4章 Vim编辑器与Shell命令脚本 章节简述: 本章首先讲解如何使用Vim编辑器来编写.修改文档,然后通过逐个配置主机名称.系统网卡以及Yum软件仓库参数文件等实验,帮助读者加深Vim编辑器中诸 ...

  3. python - unittest - 单元测试

    # -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_unittest.py@ide: PyCharm Communi ...

  4. 对于运用git将本地文件上传到coding总结

    首先需要在你的本地磁盘下建立一个目录,并且进入该目录. 前几次课程上有讲到&的用法,&&表示并且. 命令 ”makir 文件名 && cd 文件名”,cd指进入 ...

  5. Python 数据库到处到Excel

    import MySQLdb import xlwt def outMySQL(file_name): wb = xlwt.Workbook() sh = wb.add_sheet('sheet 1' ...

  6. Java面试题之有没有有顺序的Map实现类，如果有，他们是怎么实现有序的？

    Hashmap和Hashtable 都不是有序的. TreeMap和LinkedHashmap都是有序的.(TreeMap默认是key升序,LinkedHashmap默认是数据插入顺序) TreeMa ...

  7. linux maven安装（三）

    1.下载maven http://maven.apache.org/download.cgi 我下载的是:apache-maven-3.3.9-bin.tar.gz 解压:tar -zxvf apac ...

  8. 【CF725D】Contest Balloons（贪心，堆）

    题意:acm队伍可以得气球,相同气球数是一个排名.每个队伍有一个气球数上限,如果该队伍的气球数大于上限 该队伍被淘汰.给了你队伍的气球数,你的气球可以给别人,问你最大可能的排名. (2 ≤ n ≤ 3 ...

  9. C++的静态联编和动态联编详解

    一.概述: 通常来说联编就是将模块或者函数合并在一起生成可执行代码的处理过程,同时对每个模块或者函数调用分配内存地址,并且对外部访问也分配正确的内存地址,它是计算机程序彼此关联的过程.按照联编所进行的 ...

  10. SQL Server 内置函数实现MD5加密

    一.MD5加密 HASHBYTES ('加密方式', '待加密的值')     加密方式= MD2 | MD4 | MD5 | SHA | SHA1     返回值类型:varbinary(maxim ...