<!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. 删除DOM节点应用

    <!-- HTML结构 --> <ul id="test-list"> <li>JavaScript</li> <li> ...

  2. Mongodb 3.4 Replication

    官方文档:https://docs.mongodb.com/manual/replication/ 关于ReplSet的文档 https://docs.mongodb.com/manual/refer ...

  3. VMware8安装配置Win7、CentOS-7向导

    1.宿主电脑配置情况 Windows 8.1 中文版 Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz 2.4GHz RAM: 8G Type: 64 bit 2.软件 ...

  4. Eclipse有助于提高开发速度的快捷键

    用Eclipse已经很长一段时间了,自己常用的几个快捷键也已经很熟,但还是有一些自己不经常在开发中使用,但非常使用的快捷键,记录下来,以后利用来提高开发效率. 1.ctrl + shift + r   ...

  5. 04、Unity_声音管理器

    1.分享一个Unity中用于管理声音的声音管理器,适合于中小型项目,大项目就算了. 2.借鉴了很多的源码,最后修改完成,吸取百家之长,改为自己所用,哈哈. 3.源码奉上: /* * * 开发时间:20 ...

  6. 【BZOJ 2809】2809: [Apio2012]dispatching （左偏树）

    2809: [Apio2012]dispatching Description 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 Maste ...

  7. BZOJ 1150 [CTSC2007]数据备份Backup（贪心+优先队列）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1150 [题目大意] 给出n个数,请你挑出k对(每个数不可重复选取),使得他们差的绝对值 ...

  8. python安装BeautifulSoup

    1.先下载pip https://pypi.python.org/pypi/pip 安装pip cd到路径 python setuo.py install 2.添加目录到环境变量中 xxx\Pytho ...

  9. 探究Activity(1)--Activity的基本用法

    一.Activity是什么 Activity(活动)是最容易吸引用户的地方,它是一种可以包含用户界面的组件,主要用于和用户进行交互.一个应用程序中应该包括零个或多个Activity. 二.Activi ...

  10. 一种计算MD5的实现方法

    1.在需要用到加密的地方可以使用.net中的md5相关的类生成md5给文件加密. 2.基本思路: 将文件也好,字符串也好,转成字节数组,再利用.net的md5相关类生成md5相关字符串,再将字符串转成 ...