<!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. react native 调用Android原生方法

    来源:https://www.youtube.com/watch?v=WmJpHHmOKM8 教程:https://www.youtube.com/watch?v=GiUo88TGebs Breaki ...

  2. 洛谷P1908 逆序对 [权值线段树]

    题目传送门 逆序对 题目描述 猫猫TOM和小老鼠JERRY最近又较量上了,但是毕竟都是成年人,他们已经不喜欢再玩那种你追我赶的游戏,现在他们喜欢玩统计.最近,TOM老猫查阅到一个人类称之为“逆序对”的 ...

  3. Implement Trie（LintCode）

    Implement Trie Implement a trie with insert, search, and startsWith methods. 样例   注意 You may assume ...

  4. 洛谷——P1476 休息中的小呆

    P1476 休息中的小呆 题目描述 当大家在考场中接受考验(折磨?)的时候,小呆正在悠闲(欠扁)地玩一个叫“最初梦想”的游戏.游戏描述的是一个叫pass的有志少年在不同的时空穿越对抗传说中的大魔王ch ...

  5. 洛谷——P1416 攻击火星

    P1416 攻击火星 题目描述 一群外星人将要攻击火星. 火星的地图是一个n个点的无向图.这伙外星人将按照如下方法入侵,先攻击度为0的点(相当于从图中删除掉它),然后是度为1的点,依此类推直到度为n- ...

  6. python3中使用xpath无法定位，为什么一直返回空列表？

    tbody问题: 在爬去某些网站一些信息的时候,xpath工具上显示类容是正确的,但是在scrapy代码中一直返回空列表 Scrapy的部分代码: class LotteryspiderSpider( ...

  7. BZOJ 3437 小P的牧场（斜率优化DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3437 [题目大意] n个牧场排成一行,需要在某些牧场上面建立控制站, 每个牧场上只能建 ...

  8. 用Java Swing实现Freecell(空当接龙)

     目录 引言 1 游戏规则 2 界面设计和大致逻辑 2.1 界面设计 2.2 大致逻辑 3 主要功能模块设计与实现 3.1 主要思路 3.2 主要工具类 3.3 异常类 3.4 游戏初始化模块 3.5 ...

  9. nginx负载均衡upstream参数配置

    一定要注意两台机器能够telnet 访问通过  如果不能通过则两台机器都执行一下 iptables -F 机器A: php-fpm配置[www]user = wwwgroup = wwwlisten ...

  10. Ubuntu 16.04安装RedisDesktopManager

    说明:0.9版本的安装补上,只能安装0.8版本的. 官网: https://github.com/uglide/RedisDesktopManager 下载: https://github.com/u ...