本文主要是通过源码实例和大家分享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. Programming Language A 学习笔记（二）

    1. 语法糖--元组的"名称引用"与"位置引用": (e1,...,en) <=> {1=e1,...,n=en} 类型:t1 * - * tn & ...

  2. ajax返回json数据，对其中日期的解析

    JS 对其格式化 方法如下 function ChangeDateFormat(d){ //将时间戳转为int类型,构造Date类型 var date = new Date(parseInt(d.ti ...

  3. BZOJ4583 : 购物

    首先,如果一家店的区间完全包含了另一家,那么可以删掉另一家,中间的可以用组合数计算方案数. 那么现在将所有店按$l$排序,那么$l$和$r$都严格递增. 设$f[i][j][k]$表示当前是第$i$天 ...

  4. pair的使用

    #include<iostream> #include<cmath> #include<cstdio> #include<algorithm> #inc ...

  5. ASP.NET下回车键的触发效果

    在ASP.NET下,在客户端触发回车键,默认调用了页面中第一个button,这有时是非常头痛的,比如页面的第一个按键是注销键时,想想也够可怕了. .net提供设置默认回车键的属性,this.Form. ...

  6. 基于synchronized 或 ReadWriteLock实现 简单缓存机制

    package cn.xxx.xxx; import java.util.HashMap; import java.util.Map; import java.util.concurrent.lock ...

  7. firefox浏览器无法显示bootstrap图标问题总结

    在学习bootstrap的时候,有一个问题始终非常疑惑和困扰,就是firefox无法显示bootstrap自带的那套名为“glyphicon”的图标,在图标的引用处显示的是一个小方块,如图所示(4前面 ...

  8. JavaScript摇股子

    摇股子就是用javascript实现的一个简单的小特效. 下面来看一下我自己做的一个用javascript实现的摇股子. 效果图如下: 我做的股子是由6张图片,点击股子它自己会随机晃动. 代码如下: ...

  9. 关于px、em和rem的学习笔记！

    刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...

  10. 简单的jquery选项卡效果

    html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...