angularJs表单校验（超级详细！！！）
html代码
<!DOCTYPE html>
<html ng-app="angularFormCheckModule">
<head>
<meta charset="UTF-8">
<title>angular表单校验</title>
<link rel="stylesheet" href="../css/bootstrap.min.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>用户名</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 type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/angular-1.2.22.js" ></script>
<script type="text/javascript" src="../js/angularFormCheck.js" ></script>
</html>
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表单校验（超级详细！！！）的更多相关文章
- ng-messages AngularJs 表单校验方式
最新研究了一下表单校验,直接上代码. <!DOCTYPE html><html ng-app='app'><head> <meta charset=" ...
- angularjs 表单校验
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- AngularJS 1.2.x 学习笔记（表单校验篇）
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- AngularJs轻松入门（六）表单校验
表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- vue 表单校验（二）
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- 简单好用的表单校验插件——jQuery Validate基本使用方法总结
jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...
- 应用二：Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- django基础之day09，创建一个forms表单组件进行表单校验，知识点：error_messages，label，required，invalid，局部钩子函数，全局钩子函数， forms_obj.cleaned_data，forms_obj.errors，locals()， {{ forms.label }}:{{ forms }}，{{ forms.errors.0 }}
利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...
随机推荐
- jvm 监控
jvm监控可视化的有 jconsole .jmc .jvisualvm 其中jvisualvm开启一些监控会导致他自己关闭. 并且jdk下有很多工具可以进行jvm监控, jmap -histo:liv ...
- 表格边框css
table标签默认是没有边框的,但是如果我们自己加上边框boder:1px solid black;只有整个表格最外面有边框,那么如何给表格添加样式使得整个表格的tr.td都具有边框呢: <st ...
- checkbox 的全选与全不选
checkbox 的全选与全不选 只需要调用 cekAll.check();方法,这个方法接收两个参数: 参数一: 全选按钮的 id 以字符串的形式写 参数二: 其他 checkbox 的 name ...
- java中new关键字和newInstance()方法有什么区别？
1.new可以调用带参数的构造函数,newInstance不可以. 2.new 是 java 的关键字,用来构造一个类的实例.而 newInstance 是 Class 的一个方法,不过两个写法的效果 ...
- 424 - Integer Inquiry
Integer Inquiry One of the first users of BIT's new supercomputer was Chip Diller. He extended his ...
- Struts2上传大小限制
Struts中报错 the request was rejected because its size (***) exceeds the configured maximum (2097152) 最 ...
- URAL 1133. Fibonacci Sequence
题目链接 #include <cstdio> #include <string> #include <cstring> #include <iostream& ...
- C语言工具---Code::Blocks
Code::Blocks Code::Blocks 是一个开源的全功能的跨平台C/C++集成开发环境. Code::Blocks是开放源码软件.由纯粹的C++语言开发完成,它使用了著名的图形界面库wx ...
- FS210开发板上Qt4.7.0移植过程
作者:冯老师,华清远见嵌入式学院讲师. 1. 搭建Qt开发环境平台 1.开发环境:ubuntu 12.04 2.交叉编译链:arm-cortex_a8-linux-gnueabi 3.开发板:FS21 ...
- jQuery常用方法验证
验证邮箱: $('input[data-name="email"]').keyup(function () { var em; em = $(this).val(); if (!e ...