本文主要是通过源码实例和大家分享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. LNMP虚拟机开发环境配置--vagrant+virtualbox+ubuntu14.04

    工作一直用的是别人打包好的虚拟机开发环境,感觉确实很酷.所以准备自己配个开发环境,为之后自己开发一些有趣的东西做准备. ok,开始~~~ 一.安装软件 vagrant和virtualbox 此处需注意 ...

  2. 2016 Multi-University Training Contests

    2016 Multi-University Training Contest 1 2016 Multi-University Training Contest 2 2016 Multi-Univers ...

  3. HDU5909 Tree Cutting（树形DP + FWT）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5909 Description Byteasar has a tree T with n ve ...

  4. Jaunt登陆索尼PSVR，为其提供大量VR视频

    索尼PS VR自从推出就广受用户青睐,当然不仅仅是其低于高端VR头显的价格,还在于PS VR提供的丰富游戏内容.近日,国外视频网站Jaunt还专门为PSVR推出了专版APP,为其提供超过 150 个沉 ...

  5. React虚拟DOM浅析

    在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...

  6. 【java基础学习】-【泛型】

    参考以下几位同学的总结来学习: http://www.cnblogs.com/lwbqqyumidi/p/3837629.html#!comments http://www.weixueyuan.ne ...

  7. bzoj1024搜索

    进度1/10mark(感觉完不成了) 事实上我刚看到题目一下子慌了,,,我在想怎么二分一块的长宽,然后验证 然而极其难写 于是想有没有暴力,举一些例子模拟一下 然后发现切割是有很明显的限制的:每次切割 ...

  8. Tomcat7 配置 ssl

    运行一个配置了ssl的项目时tomcat总是启动不成功,报错:“requires the APR/native library which is not available”,后来发现是找不到apr的 ...

  9. CSS样式，雪碧，图片替换，渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...

  10. ajax 全套

    ajax简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编程语言, ...