app.html
<!DOCTYPE html>
<html ng-app="angularFormCheckModule">
<head>
<meta charset="UTF-8">
<title>angular表单校验</title>
<link rel="stylesheet" href="bootstrap.css" />
<style>
span{
color: red;
}
</style>
</head>
<body ng-controller="angularFormCheckCtrl">
<!--使用angular校验，每一个校验的项都必须用ng-model，不然无法执行在脏检查，就无法校验-->
<form name="angularForm" novalidate method="post">
<table class="table table-bordered">
<tr>
<td>用户ID</td>
<td>
<input type="number" required="required" ng-model="user.userName" name="userName" ng-minlength="6"/>
<!--angularForm.userName.$dirty检查是否是第一次输入！网上有很多种方法校验是否是第一次输入-->
<span class="warning" ng-show="angularForm.userName.$dirty && angularForm.userName.$error.required">*</span>
<span class="warning" ng-show="angularForm.userName.$error.number">只能输入数字</span>
<span class="warning" ng-show="angularForm.userName.$error.minlength">最少为6位数</span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<!--这里的id,一定要等于compare-pwd的值，因为指令里面是根据Id取值的-->
<input type="password" required="required" ng-minlength="6" name="pwd" ng-model="user.password" id="pwd"/>
<!--angularForm.pwd.$pristine首次输入，不太清楚的就自己运行，去掉条件一个一个的试！-->
<span class="warning" ng-show="!angularForm.pwd.$pristine && angularForm.pwd.$error.required">*</span>
<span class="warning" ng-show="angularForm.pwd.$error.minlength">最少为6位数</span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<!--这里compare-pwd的值，要等于被比较的对象的name属性值，即第一个密码框的name值-->
<input type="password" required="required" name="pwd2" compare-pwd="pwd" ng-model="pwd2"/>
<span class="warning" ng-show="angularForm.pwd2.$error.required">*</span>
<!--注意这里的pwdmatch,是指令里面设置的-->
<span class="warning" ng-show="angularForm.pwd2.$error.pwdmatch">X</span>
<span class="warning" ng-show="angularForm.pwd2.$valid" style="color: green;">OK</span>
<!--
其实这种事最简单的校验方式，不用写指令！！！
<span ng-show="user.password !=pwd2">两次密码输入不一致</span>
-->
</td>
</tr>
<tr>
<td>手机</td>
<td>
<!--pattern正则表达式校验输入内容-->
<input type="number" required="required" name="phone" ng-model="user.phone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/">
<span class="warning" ng-show="angularForm.phone.$error.required">*</span>
<span class="warning" ng-show="angularForm.phone.$error.number">只能输入数字</span>
<span class="warning" ng-show="angularForm.phone.$error.pattern">手机格式不正确</span>
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" required="required" ng-model="user.email" name="email"/>
<span class="warning" ng-show="angularForm.email.$error.required">*</span>
<span class="warning" ng-show="angularForm.email.$error.email">邮箱格式不正确</span>
</td>
</tr>
<tr>
<td>URL</td>
<td>
<input type="url" required="required" ng-model="user.url" name="url"/>
<span class="warning" ng-show="angularForm.url.$error.required">*</span>
<span class="warning" ng-show="angularForm.url.$error.url">URL格式不正确</span>
</td>
</tr>
<tr>
<td>(注:*为必填)</td>
<td>
<input type="submit" value="提交" ng-disabled="!angularForm.$valid" class="btn btn-success"/>
</td>
</tr>
</table>
</form>
</body>
<script src="jquery-1.8.3.js"></script>
<script src="bootstrap.js"></script>
<script src="angular1.2.9.js"></script>
<script src="app.js"></script>
</html>
app.js，除了指令外，没什么可用的，写出来只是为了，说一下mvc模式而已！
var app = angular.module("angularFormCheckModule",[]);
/*这里使用MVC的模式（用来举例说明MVC而已）*/
app.controller("angularFormCheckCtrl",function($scope,angularFormCheckFactory){//function里的参数写你在函数里需要用到的
$scope.testVar = angularFormCheckFactory.getTest();//这里就能取到$scope.testVar的值为---"练习angular表单校验";
$scope.user = {};
$scope.test= "sss";
});
/*自己可以去看factory、service、providers的区别（http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider）*/
/*用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。*/
app.factory('angularFormCheckFactory',function(){
//这里写自己的业务逻辑
var test = "练习angular表单校验";
var service = {};//自定义一个对象
service.getTest = function(){//给对象添加方法
return test;
}
return service;//返回自定义的service对象！！！
});
/*自定义指令--比较两个密码是否相等.angular的指令是驼峰的形式（这里是comparePwd页面就是compare-pwd）*/
app.directive('comparePwd',function(){
/*angular 自定义指令，可上网自行查找*/
return{
require : 'ngModel',
/*scope表示作用域，elem表示使用这个指令的元素对象（这里指第二个密码框），attrs。。。ctrl。。。*/
link : function(scope,elem,attrs,ctrl){
/*写自己的业务逻辑*/
//注意这样取值的话，第一密码框的Id值必须要设置且必须与第二个密码框的compare-pwd属性的值相同
var firstPwdIdObj = "#" + attrs.comparePwd;
$(elem).add(firstPwdIdObj).on('keyup',function(){
/*手动执行脏检查*/
scope.$apply(function(){
//$(firstPwdIdObj).val()表示第一个密码框的值。elem.val()表示第二个密码框的值
var flag = elem.val() === $(firstPwdIdObj).val();
//alert(flag+",--"+elem.val()+",--"+$(firstPwdIdObj).val());
ctrl.$setValidity("pwdmatch",flag);//flag,表示是否相等。pwdmatch用于$error时的标识符，注意看页面，$setValidity是require中ngModel的方法！
});
});
}
}
});
运行效果：
相关推荐
AngularJs是谷歌开发的一个前端JavaScript框架，它允许...对于希望掌握AngularJs表单校验的开发者来说，这个实例是一个很好的参考，通过理解和实践这些基本概念和用法，可以进一步掌握更复杂场景下的表单校验实现。
AngularJS表单可以使用HTML原生的表单和控件，比如`<input>`、`<select>`、`<button>`和`<textarea>`等元素。AngularJS通过`ng-app`指令指定应用的范围，`ng-controller`用于指定视图对应的控制器，而`ng-model`则...
自动验证是AngularJS表单验证中的另一种方式。AngularJS利用HTML5的表单验证特性，如required、pattern、min、max等，自动地对表单元素进行验证，无需开发者编写额外的验证逻辑代码。 当表单元素符合HTML5验证要求...
动态校验是AngularJS中一个非常重要的功能，它允许开发者在运行时根据不同的条件或用户交互来改变表单验证规则。这种灵活性使得我们可以创建更加智能和动态的用户界面。 在AngularJS中，表单验证主要通过`...
在上述提供的示例代码中，我们可以看到以下几点关于AngularJS表单验证的关键知识点： 1. 表单元素上使用`name`属性。这是创建模型控制器（`ng-model`）和视图之间的联系所必需的。通过为每个需要验证的元素提供一个...
在AngularJS中，表单验证是构建用户交互性应用程序的关键组成部分。它确保用户输入的数据符合预设的格式和规则，从而提高数据质量和用户体验。AngularJS提供了内置的验证机制，但有时候，开发人员需要根据特定需求...
在组件中，我们需要初始化一个`Person`实例作为数据模型，以及管理表单状态的变量，如`submitted`。 4. **编写HTML模板**：创建一个独立的HTML模板文件，如`form.html`，用于构建表单的布局。使用Angular的双向数据...
55校验AngularJS表单153 理解ngFormController153 运用name属性将表单附加到作用域上154 为用户信息表单增加动态行为154 显示验证错误155 让保存按钮无效156 使原生浏览器校验无效157 56在其他表单中嵌套表单...
FormValidation与许多其他库（如Bootstrap、Foundation、AngularJS等）兼容，可以轻松地与这些库结合使用，提供一致的用户体验。 总结，jQuery FormValidation是一个功能强大的表单验证插件，它使得开发者能够快速...
AngularJS内置了强大的表单验证机制，允许开发者以声明式的方式添加和管理表单验证。 在AngularJS中，表单验证主要分为两种类型：同步验证和异步验证。同步验证是立即进行的，例如必填项验证、数字范围验证等；异步...
- 表单验证，前端JavaScript初步验证后，再通过Ajax提交数据至服务器进行深度校验。 通过这些实例，开发者可以深入理解JSP和Ajax如何协同工作，以及如何利用它们来创建高性能、高互动性的Web应用。掌握这些技能对于...
AngularJS 提供了内置的表单验证机制，可以对用户输入的数据进行校验，确保数据的准确性和完整性。在创建广告发布表单时，这将非常有用。 ### 7. 过滤器 过滤器用于格式化或转换数据，比如日期格式化、货币格式化...
这种数据绑定机制极大地简化了基于Web的表单处理、数据校验和用户界面更新。 首先，让我们来看一下ng-model指令的基本用法。ng-model指令的作用是将HTML元素的值（通常是输入字段的值）与AngularJS作用域（scope）...
在讨论AngularJS的文件上传组件Flow.js时，我们首先要认识到文件上传功能在现代Web项目中的重要性。无论是在电商平台还是日常管理软件中，文件上传与下载功能都变得必不可少。AngularJS作为一款流行的前端框架，配合...
9. **表单验证**（Form Validation）：AngularJS提供了内置的表单验证功能，如`ng-valid`、`ng-invalid`等，可以轻松实现库存添加或编辑时的数据校验。 10. **测试**（Testing）：AngularJS提供了诸如`ngMock`这样...
**描述分析：** "登录演示" 描述表明这是一个用于展示如何在Web应用中实现用户登录功能的实例。它可能包括了验证用户凭据、安全处理用户数据以及提供反馈等常见登录流程。同时，通过结合AngularJS、Bootstrap和Grunt...