<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>angularjs-validate</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<form name="form1" id="form1">
账号:<input type="text" name="username" ng-model="username" required>
<span style="color:red" ng-show="form1.username.$dirty && form1.username.$invalid">
<span ng-show="form1.username.$error.required">请输入账号</span>
</span>
<br />
邮箱:<input type="text" name="email" ng-model="email" required>
<span style="color:red" ng-show="form1.email.$dirty && form1.email.$invalid">
<span ng-show="form1.email.$error.required">请输入邮箱</span>
</span> <p>
<input type="submit" ng-disabled="form1.username.$dirty && form1.username.$invalid || form1.email.$dirty && form1.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
</script>
</body>
</html>

如何使用angularjs实现表单验证的更多相关文章

  1. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  2. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  3. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  4. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  5. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  6. AngularJS复习------表单验证

    在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...

  7. AngularJs实现表单验证

    首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...

  8. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

  9. AngularJS form表单验证(非常全面)

    构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...

  10. AngularJS的表单验证提交示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...

随机推荐

  1. 转:攻击JavaWeb应用[1]-javaEE基础

    http://www.cnblogs.com/oh3o/p/3224562.html JSP: 全名为java server page,其根本是一个简化的Servlet. Servlet:Servle ...

  2. Python 一条语句如何在多行显示的问题

    在做python学习的时候,我照着pdf,敲代码,遇到一大难题: return render_to_response('index.html',{'title':'my page','user':us ...

  3. Crontab 在linux中的非常有用的Schedule Jobs

    crontab 是linux系统集成的定时任务命令,它对于系统运行(数据的备份,调度系统资源或命令,程序的定时触发等非常有用).crontab有些类似于Windows系统的Service的任务计划程序 ...

  4. 链式前向星实现的堆优化dij求最短路模板

    #include<cstdio> #include<string> #include<cstdlib> #include<cmath> #include ...

  5. RabbitMQ (十) 远程过程调用(RPC)

    在远程计算机上运行一个函数并等待结果,我们通常叫这种模式为远程过程调用或者RPC. 通过 RabbitMQ 进行 RPC 很容易,客户端发送请求消息,服务器回复响应消息.为了接收响应,我们需要发送带有 ...

  6. Python开发基础-Day21多态与多态性、绑定方法和非绑定方法

    多态与多态性 多态 多态并不是一个新的知识 多态是指一类事物有多种形态,在类里就是指一个抽象类有多个子类,因而多态的概念依赖于继承 举个栗子:动物有多种形态,人.狗.猫.猪等,python的序列数据类 ...

  7. 解决在jqmobi框架上使用mobiscroll控件的bug问题

    jqmobi(appframework)框架的好处主要是它很轻量级,用在手机上占用内存较小,实际表现较为流畅,这也是它区别于jQuery mobile的一大特色,上一篇博客中提供了在它上面使用日期控件 ...

  8. Spring中的设计模式2

    Spring设计模式分析   工厂模式和单态模式 工厂模式:可以将java对象对象的调用者从被调用者的实现逻辑中分离.调用者只关心被调用者必须满足的某种规则,这种规则我们看做是接口,不必关心实例的具体 ...

  9. canvas之arcTo

    arc与arcTo,从名字都能看出来相似.arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线.但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius) ...

  10. 手动清除或刷新Linux的Swap分区

    物理内存接近饱和时,系统会自动将不常用的内存文件转储到Swap中,但Swap使用率达30%的时候对系统性能可能有一定影响.但当物理内存重新释放时,储存在Swap分区的其它应用不会重新回到物理内存中,所 ...