代码下载：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. Python的深浅copy

    27.简述Python的深浅拷贝以及应用场景? 深浅拷贝的原理 深浅拷贝用法来自copy模块. 导入模块:import copy 浅拷贝:copy.copy 深拷贝:copy.deepcopy 字面理 ...

  2. 【185天】黑马程序员27天视频学习笔记【Day14-下】

    叨逼叨两句 不容易,白天被叫去帮忙,不得已晚上来挑灯夜战,熬到2点,总算完成任务了. 我打算下周开始换一个更新时间,每次把deadline设置为晚上12点,都会接近或者超过这个时间,之后改成中午12点 ...

  3. hdu5443 The Water Problem

    The Water Problem Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  4. [NOIP2017] 时间复杂度 (模拟,栈)

    题目链接 Solution 用栈进行模拟. 记录一个 \(map\) 来看循环变量有没有用过. 对于每一次入栈都加信息. 出栈直接将 \(top\) 减一下. 反正一堆乱七八糟的东西瞎搞... 注意条 ...

  5. form标签

    一 什么是form标签 <form> 标签用于为用户输入创建 HTML 表单. 表单用于向服务器传输数据. 二 属性 1 method method 属性规定如何发送表单数据(表单数据发送 ...

  6. hud 4746 莫比乌斯反演

    Mophues Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 327670/327670 K (Java/Others)Total S ...

  7. SEO总结（一）

  8. java内部类的四大作用

    一.定义 放在一个类的内部的类我们就叫内部类. 二. 作用 1.内部类可以很好的实现隐藏 一般的非内部类,是不允许有 private 与protected权限的,但内部类可以 2．内部类拥有外围类的所 ...

  9. 制作不随浏览器滚动的DIV-带关闭按钮

    制作不随浏览器滚动的DIV 效果见 http://bbs.csdn.net/topics/90292438  的滚动效果. $(function(){ //获取要定位元素距离浏览器顶部的距离 var ...

  10. LeetCode OJ--Next Permutation *

    求一个排列的下一个排列. 1,2,3 → 1,3,23,2,1 → 1,2,31,1,5 → 1,5,1 #include <iostream> #include <vector&g ...