代码下载：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. loj2182 「SDOI2015」寻宝游戏

    参考这里 #include <iostream> #include <cstdio> #include <set> using namespace std; typ ...

  2. php isset()与empty()详解

    bool isset(mixed var);[;mixed var[,...]] 这个函数需要一个变量名称作为参数,如果这个变量存在,则返回true,否则返回false. 也可以传递一个由逗号间隔的变 ...

  3. linuxlinux0.11源码学习——bootsect.s学习

    由于一直想写一个自己的操作系统,网上推荐了<linux内核完全注释>.自学了一个星期,感觉这本书还是很好的,同时写下关于内核代码的理解,如果有什么不对的对方,欢迎大家一起来交流. 在内核引 ...

  4. 九度oj 题目1355：扑克牌顺子

    题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他 ...

  5. 【Luogu】P3047附近的牛（树形DP）

    题目链接 树形DP,设f[i][j]是当前在i点,j步之内有多少牛.从相邻点to的f[to][j-1]转移而来,减去重复计算即可. #include<cstdio> #include< ...

  6. CSS3的writing-mode属性

    writing-mode这个CSS属性以前是IE的独有属性,IE5.5浏览器就已经支持了.在很长一段时间里,FireFox, Chrome这些现代浏览器都不支持writing-mode,各大现代浏览器 ...

  7. yield的概念及使用姿势

    概念: 当调用Thread.yield方法时,会给线程调度器一个当前线程愿意让出CPU使用的暗示,但是线程调度器可能会忽略这个暗示. 代码演示: public class YieldDemo impl ...

  8. 如何应对pm2.5

    细颗粒物又称细粒.细颗粒.PM2.5:指环境空气中空气动力学当量直径小于等于 2.5 微米的颗粒物,也称细颗粒物.能较长时间悬浮于空气中,其在空气中含量(浓度)越高,就代表空气污染越严重.可吸入颗粒物 ...

  9. es6总结（三）--数组

  10. 反汇编角度->C++ const

    #include<iostream> #include<stdlib.h> using namespace std; const int &add( const int ...