本文主要是通过源码实例和大家分享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. 每天一个linux命令--定时启动

    1.设置启动的时间,输入crontab -e命令 设置一种编辑器,进入编辑界面,设置启动的时间为每5分钟启动一次wanghy.sh脚本 # m h dom mon dow command # */ * ...

  2. solr4.3 java.lang.NumberFormatException

    solr java.lang.NumberFormatException 现象:定时每天全量,每隔5分钟增量DIH从mysql导入数据 solr4j返回加过Id列表,一天偶然出现 java.lang. ...

  3. 第2章 新手必须掌握的Linux命令

      第2章 新手必须掌握的Linux命令 章节简述: 本章节讲述系统内核.Bash解释器的关系与作用,教给读者如何正确的执行Linux命令以及常见排错方法. 经验丰富的运维人员可以恰当的组合命令与参数 ...

  4. 国内外三个不同领域巨头分享的Redis实战经验及使用场景

    Redis不是比较成熟的memcache或者Mysql的替代品,是对于大型互联网类应用在架构上很好的补充.现在有越来越多的应用也在纷纷基于Redis做架构的改造.首先简单公布一下Redis平台实际情况 ...

  5. About_全在里面

    分享·地址:http://www.itxueyuan.org/view/6254.html

  6. Python 爬虫1——爬虫简述

    Python除了可以用来开发Python Web之后,其实还可以用来编写一些爬虫小工具,可能还有人不知道什么是爬虫的. 一.爬虫的定义: 爬虫——网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区 ...

  7. （转）小小科学家的归来 by 王珢

    小小科学家的归来 by 王垠很多人来信关心我的现状,所以在写别的技术性文章之前,先说说我现在的情况吧.虽然自己追求的东西和经历都比较不同寻常,但是也许可以给奋斗中的人们一些慰藉和鼓励. 首先是超级好消 ...

  8. Python之路【第七篇】python基础 之socket网络编程

    本篇文章大部分借鉴 http://www.cnblogs.com/nulige/p/6235531.html python socket  网络编程 一.服务端和客户端 BS架构 (腾讯通软件:ser ...

  9. Python之路【第二篇】python基础 之基本数据类型

    运算符 1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算: name = "yehaoran " # in 判断ye是否在name里面 在的话返回ok ...

  10. java-如何用eclipse打包jar

    Eclipse通过导出的方式(右键单击项目,之后选择Export)打包java类文件生成jar包. 方法一:(在项目工程没有引用外部jar包时,直接导出) 选中工程---->右键,Export. ...