<!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. 最短路-Floyd

    简介: 算法的特点:  弗洛伊德算法是解决任意两点间的最短路径的一种算法,可以正确处理有向图或有向图或负权(但不可存在负权回路)的最短路径问题,同时也被用于计算有向图的传递闭 包. 算法思想: 通过F ...

  2. linux 下 php 扩展

    首先查看,php 原来安装的配置 /www/server/php/72/bin/php -i | grep configure (php 位置) 加上你的扩展 '--with-mcrypt' make ...

  3. Struts2 + Hibernate3.3 开发简单的登录注册功能【J2EE】

    开发环境: IDE:Myeclipse10.0 数据库:Oracle(SQL Developer) Web容器:Tomcat 7.0 JDK:1.6 Struts:2.0 Hibernate:3.3 ...

  4. 【POJ 2409】 Let it Bead（置换、burnside引理）

    Let it Bead "Let it Bead" company is located upstairs at 700 Cannery Row in Monterey, CA. ...

  5. [BZOJ3167][P4099][HEOI2013]SAO(树形DP)

    题目描述 Welcome to SAO ( Strange and Abnormal Online).这是一个 VR MMORPG, 含有 n 个关卡.但是,挑战不同关卡的顺序是一个很大的问题. 有 ...

  6. 实验四 Android程序设计-5

    点击button按钮,进入下一活动,"the third activity"

  7. Android Studio初级介绍

    Android Studio原来不咋地,但是现在可以尝试抛弃eclipse转用它了, 亲儿子到底是亲儿子,现在的Android Studio已经今非昔比,用了一段时间,简直爱不释手,我觉得,It's ...

  8. （Mark=转）ehcache memcache redis

    Ehcache 在java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS中取出来的高花费.高延迟采取的一种缓存方案.正因为Ehcache具有健壮性(基于java开发).被认证(具有apa ...

  9. Nginx 重定向 伪静态 rewrite index.php

    参考https://www.kancloud.cn/manual/thinkphp5/177576 thinkphp入口文件同目录下添加.把下面的内容保存为.htaccess文件 <IfModu ...

  10. 诡异的 "密码取回" 邮件问题

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...