代码下载：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. 用asp.net+Jquery+Ajax+sqlserver编写的 (英语六级记单词)

    开始(英语对程序员的重要性引用) 出处 英语的重要性已经毋庸置疑,对于程序员来说更甚,一些最新的技术资料是英文的,如果想进入外企英语也是一个很重要的条件.对于程序员来说怎样学习好英语,在此谈一下我的一 ...

  2. 根据已经commit的数据，进行leader和peon之间的同步

    Leader Election基本设计 按照rank表示优先级解决冲突问题,为每个monitor预先分配了一个rank 只会接受优先级(rank)比自己高.epoch比上次已接受的epoch大的选举请 ...

  3. TOJ4483: Common Digit Pairs

    4483: Common Digit Pairs  Time Limit(Common/Java):3000MS/9000MS     Memory Limit:65536KByteTotal Sub ...

  4. Conda相关命令的使用

    -- Conda basics Conda基础命令 conda info 查看已安装的环境 conda install PACKAGENNAME 安装包 conda update PACKAGENAM ...

  5. HashSet源码分析 jdk1.6

    Set的特点:Set元素无顺序,且元素不可以重复. 1.定义 public class HashSet<E> extends AbstractSet<E> implements ...

  6. 《Spark Python API 官方文档中文版》 之 pyspark.sql (四)

    摘要:在Spark开发中,由于需要用Python实现,发现API与Scala的略有不同,而Python API的中文资料相对很少.每次去查英文版API的说明相对比较慢,还是中文版比较容易get到所需, ...

  7. [CQOI2010] 扑克牌 (二分答案,巧解)

    Description 你有n种牌,第i种牌的数目为ci.另外有一种特殊的牌:joker,它的数目是m.你可以用每种牌各一张来组成一套牌,也可以用一张joker和除了某一种牌以外的其他牌各一张组成1套 ...

  8. 移动web端使用rem实现自适应原理

    1.先获取到物理像素和实际像素的像素比 var pixclPatio = 1 / window.devicePixelRatio; 2.viewport视口设置为像素比大小 document.writ ...

  9. docker基础——自定义镜像、创建私有仓库、查看 docker 运行状态

    一.自定义镜像 1,案例1 要求:请自定义一个 docker 镜像,基于 hub.c.163.com/library/centos,要求创建出来的镜像在生成容器的时候,可以直接使用 ifconfig ...

  10. poj 3468 线段树成段更新

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 54012   ...