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

<!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. torch.utils.data.DataLoader与迭代器转换

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

  2. Solution -「多校联训」排水系统

    \(\mathcal{Description}\)   Link.   在 NOIP 2020 A 的基础上,每条边赋权值 \(a_i\),随机恰好一条边断掉,第 \(i\) 条段的概率正比于 \(a ...

  3. idea 自定义toString

    实现功能: 1.自定义json格式 2.字符及时间类型添加null判断 3.时间进行格式化 步骤: 1.alt+insert-----toString---setting----templates 2 ...

  4. [Java]Java入门笔记（一）：IDE设置、部分快捷键

    一.Eclipse 软件设置 注意 同一时间,工作空间只能使用1个. 1.1 创建程序的步骤 创建项目Java Project 注意:项目名不要使用数字,也不要以数字开头: 选择"Use d ...

  5. 微信小程序wifi控制开发

    小程序wifi控制开发方案 ----- 由小程序通过公众号给wifi控制板进行配网,后台服务器自动生成设备名并注册在数据库中,wifi控制板自动保存生成的设备名,小程序可读取WIFI控制板的数据,控制 ...

  6. [数据生成器]UVA10054 The Necklace

    应吴老师之邀,写了个数据生成器. 目前这个数据生成器可以保证生成的数据都是合法的,且效率也还不错.只是在建立普通连通图的时候zyy偷懒了,直接把所有点串起来从而保证图的连通.如果有大神有更好的方法请不 ...

  7. Kubernetes云供应商架构的未来

    首先,我想分享SIG的使命,因为我们用它来指导我们现在和将来的工作.从我们的章程中直接来看,SIG的使命是简化,开发和维护云供应商集成,作为Kubernetes集群的扩展或附加组件.这背后的动机是双重 ...

  8. C# 开始支持动态化编程

    在.NET 4.0的运行时进行动态编程时,我们引入了一个新功能:动态语言运行时.可以这样理解,CLR的目的是为静态类型的编程语言提供一个统一的框架或编程模型,而DLR便是在.NET平台上为动态语言提供 ...

  9. Qt：Qt资源系统

    学习自 Qt 资源系统(Qt Resource System) - 知乎 1.什么是Qt 资源系统 Qt资源系统是一种将图片.数据存储于二进制文件中的一套系统.这些图片.数据会被我们的程序使用,它们称 ...

  10. Chrome：开发者模式下复制Element下的代码

    Element模块下的代码只能一行一行复制,想要复制一个代码块,可以把该代码块先收起来,再对这个收起来的代码块进行复制就OK了