本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识，希望通过本文的分享，对大家学习AngularJS有所帮助。

1.常规表单验证；

2.AngularJs中提供的表单验证实例。

实例代码

<!doctype html>

<html ng-app="lesson" ng-controller="FormCtrl" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>

LESSON 8

</title>

<link rel="stylesheet" type="text/css" href="css/main.css" />

<style>

#content1{padding:16px;}

</style>

</head>

<body>

<form  name="myForm" ng-submit="PostForm()"  >

<ul>

<li>

<label>用户名：</label><input type="text" name="UserName" ng-model="UserName" ng-pattern="/^\w{8,18}$/" />

<span style="color:red" ng-show="myForm.UserName.$dirty && myForm.UserName.$invalid">

<span>请输入8到18位的用户名</span>

</span>

</li>

<li>

<label>编号</label><input type="text" name="UserIndex" ng-model="UserIndex" ng-pattern="/^\d+$/" />

<span style="color:red;" ng-show=" myForm.UserIndex.$dirty && myForm.UserIndex.$invalid ">

请输入您的数字编号

</span>

</li>

<li>

<input ng-disabled="myForm.$invalid" type="submit" value="提交" />

</li>

</ul>

</form>

<script src="scripts/angular-1.4.6.min.js"></script>

<script>

var app = angular.module("lesson",[]);

app.controller("FormCtrl",function($scope){

$scope.myForm={};

$scope.UserName = 'Tom';

$scope.PostForm=function(){

console.log($scope.myForm);

}

});

</script>

</body>

</html>

执行结果：

原文链接：http://www.maiziedu.com/wiki/angularjs/prove/

AngularJS表单验证实现方法详解的更多相关文章

  1. JavaScript表单序列化的方法详解

    本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧. 在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单 ...

  2. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  3. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  4. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  5. AngularJs表单验证

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

  6. AngularJS表单验证,手动验证或自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...

  7. [Angularjs]表单验证

    写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...

  8. AngularJS 表单验证小结

    注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...

  9. angularjs 表单验证（不完整版）

    针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...

随机推荐

  1. java中注解的使用与实例(一)

    注解目前非常的流行,很多主流框架都支持注解,而且自己编写代码的时候也会尽量的去用注解,一时方便,而是代码更加简洁. 注解的语法比较简单,除了@符号的使用之外,它基本与Java固有语法一致.Java S ...

  2. 【转载】AB测试结果分析

    AB测试,200个请求,20个并发.这样的测试强度,CPU占了70-80%,w3p占用了70多M内存,本想多测几次,看看它的内存会不会涨上去,没 有测试机器没办法,开发机要干活.我估计CPU就有问题了 ...

  3. Android SDK Manager 更新代理配置

    转自:http://www.cnblogs.com/tao560532/p/4483067.html 出现问题: 消除SDK更新时,有可能会出现这样的错误:Download interrupted: ...

  4. Uboot+Linux启动时间优化

    动机 设备启动时间往往是项目立项时的一项重要技术指标.快速的启动时间意味着设备宕机时间的缩短,系统的快速恢复,也能改善用户使用时的体验感受,是一项重要的市场竞争力. 准备 优化启动时间之前,我们首先要 ...

  5. 数据泵Expdp和Impdp

    一.数据泵导入导出技术 1.结构 2.目录对象 二.EXPDP参数 1.attach 2.content 3.directory 4.dumpfile 5.estimate 6.estimate_on ...

  6. Angular 单元格合并

    在Angular实现表格输出的话,使用ng-repeat输出信息, 使用了: ng-repeat-start ng-repeat-end ng-hide="$first" < ...

  7. sql server的优缺点

    sql server的优点众多,让其在数据库领域独占鳌头,成为最受欢迎的数据库系统,其优缺点也自然是喜爱者们所关注的,首先了解一下它的历史: sql server是一个关系型数据库管理系统,最初是由M ...

  8. StringBuilder（字符串拼接类）

    StringBuilder是在using System.Text命名空间下的一个成员. 在做字符串拼接的时候,因为字符串是引用类型,新的字符串是会再内存中创建的,所以用+号拼接字符串是比较耗效率的. ...

  9. MySql UDF 调用外部程序和系统命令

    1.mysql利用mysqludf的一个mysql插件可以实现调用外部程序和系统命令 下载lib_mysqludf_sys程序:https://github.com/mysqludf/lib_mysq ...

  10. session跟cookie的区别

    这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...