最新研究了一下表单校验，直接上代码。

<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset="utf-8">
<title translate="TITLE">Basic usage</title>
<link href="../css/bootstrap.css" rel="stylesheet" />
<style>body { text-align: center;
padding-top: 30px;
}
</style>
<script type="text/ng-template" id="form-messages">
<div ng-message="required">This field cannot be blank</div>
<div ng-message="minlength">The value for this field is too short</div>
<div ng-message="maxlength">The value for this field is too long</div>
<div ng-message="email">You have entered an incorrect email value</div>
<div ng-message="pattern">You did not enter the value in the correct format</div>
<div ng-message="password-characters">
Your password must consist of alphabetical or numeric characters.
It must also contain at least one special character, a number as well as an uppercase letter.
</div>
</script>
<script type="text/javascript" src="../script/angular.js"></script>
<script type="text/javascript" src="../script/angular-messages.js"></script>
<script type="text/javascript">
angular.module('app', ['ngMessages'])
.controller('FormCtrl', function($scope) {

})
.directive('matchValidator', function() {
return {
require: 'ngModel',
link : function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(value) {
ngModel.$setValidity('match', value == scope.$eval(attrs.matchValidator));
return value;
});
}
}
})
.directive('passwordCharactersValidator', function() {
var PASSWORD_FORMATS = [
/[^\w\s]+/, //special characters
/[A-Z]+/, //uppercase letters
/\w+/, //other letters
/\d+/ //numbers
];

return {
require: 'ngModel',
link : function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(value) {
var status = true;
angular.forEach(PASSWORD_FORMATS, function(regex) {
status = status && regex.test(value);
});
ngModel.$setValidity('password-characters', status);
return value;
});
}
}
})
</script>
</head>

<body >
<!-- ng-controller="FormCtrl" ng-submit="submit()" ng-if="interacted(my_form.password)"-->
<form name="my_form" class="main-form container" ng-controller="FormCtrl" novalidate>
<div class="control-group">
<label for="input_password">Create a password:</label>
<input class="form-control"
type="password"
name="password"
id="input_password"
ng-model="data.password"
ng-minlength="6"
ng-maxlength="12"
password-characters-validator
required />

<div

ng-messages="my_form.password.$error"
ng-messages-include="form-messages"></div>
</div>
<div class="control-group">
<label for="input_password_confirm">Confirm your password:</label>
<input class="form-control"
type="password"
name="password_confirm"
id="input_password_confirm"
ng-model="data.password_confirm"
ng-minlength="6"
ng-maxlength="12"
password-characters-validator
match-validator="data.password"
required />
<!--ng-if="interacted(my_form.password_confirm)" -->
<div ng-messages="my_form.password_confirm.$error" ng-messages-include="form-messages">
<div ng-message="match">This password does not match the password entered before</div>
</div>
</div>
</form>

</body>
</html>

运行结果：

ng-messages AngularJs 表单校验方式的更多相关文章

  1. angularJs表单校验（超级详细！！！）

    html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...

  2. angularjs 表单校验

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  3. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  4. AngularJs轻松入门（六）表单校验

    表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...

  5. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  6. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  7. 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  8. day32(表单校验js和jquery表单校验)

    校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...

  9. JQuery -- Validate, Jquery 表单校验

    1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...

随机推荐

  1. Apache Http Server与Tomcat6 的负载均衡(二)

    一般来说,实现Apache与Tomcat6的负载均衡有两种方式,一种是使用mod_jk,另一种是使用mod_proxy模块.本文只讨论mod_jk方式. 无论使用哪种方式,一般都要经过以下这几个步骤( ...

  2. MyBatis加强（4）~mybatis 插件开发

    一.插件介绍[动态代理] 1.插件[动态代理]:mybatis 允许在已经映射的语句的执行过程的某个时机进行拦截增强的机制. 2.mybatis中的组件动态代理的运用: MyBatis 在四大组件对象 ...

  3. 北京太速科技-6U VPX 6槽 Full Mesh结构背板机箱

    一.产品概述 Ori6UVPX6SlotFullMesh264背板机箱 为 6U VPX 6槽 Full Mesh结构,用于实现PCIE.RapidIO IO 4X Full Mesh 高速数据互联, ...

  4. windows设备相关位图与设备无关位图

    windows支持两种位图格式,DDB(device-dependent bitmap),DIB(device-independent bitmap).设备相关位图用于windows显示系统中,其图像 ...

  5. torch.utils.data.DataLoader与迭代器转换

    在做实验时,我们常常会使用用开源的数据集进行测试.而Pytorch中内置了许多数据集,这些数据集我们常常使用DataLoader类进行加载. 如下面这个我们使用DataLoader类加载torch.v ...

  6. 论文解读（AGCN）《 Attention-driven Graph Clustering Network》

    Paper Information Title:<Attention-driven Graph Clustering Network>Authors:Zhihao Peng, Hui Li ...

  7. FPGA+x86构建高性能国产网络测试仪竞技之道

    众所周知,以太网已经深入我们的生活无处不在,企业.校园.大数据中心和家庭等都离不开网络,否则我们的生活将受到严重的影响. 以太网的接口速率也是迅速发展:10M.100M.GE.10GE.40GE.10 ...

  8. 【C#基础概念】 里氏转换-as/is

    里氏转换 子类可以赋值给父类.(如果有一个地方需要一个父类作为参数,我们可以给一个子类 ) 如果父类中装的是子类对象,那么可以将这个父类强转为子类对象. 创建几个类帮助我们理解: using Syst ...

  9. WPF中使用OpenFileDialog打开文件

    添加Microsoft.Win32程序集 private void OnOpenFile(object sender, EventArgs e) { OpenFileDialog openFileDi ...

  10. C#?和??运算符以及合并条件表达式

    最近项目中,常常碰到这个?和??这两个操作符,之前说得不够详细,趁着周末补全来,希望能够给大家带来帮助. (一)?操作符 我们知道值类型是不肯能为空的,它总是包含值的本身,不会为NULL,这估计也是值 ...