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

<!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. .NET 云原生架构师训练营（权限系统 RGCA 开发任务）--学习笔记

    目录 目标 模块拆分 OPM 开发任务 目标 基于上一讲的模块划分做一个任务拆解,根据任务拆解实现功能 模块拆分 模块划分已经完成了边界的划分,边界内外职责清晰 OPM 根据模块拆分画出 OPM(Ob ...

  2. k8s之PV、PVC

    目录 一.PVC和PV 1.1 PV概念 1.2 PVC概念 1.3 PV与PVC之间的关系 1.4 两种PV的提供方式 二.基于nfs创建静态PV资源和PVC资源 2.1 配置nfs存储(192.1 ...

  3. springBoot2.*使用redis集群/单机方法

    在springboot1.x系列中,其中使用的是jedis,但是到了springboot2.x其中使用的是Lettuce. 此处springboot2.x,所以使用的是Lettuce.关于jedis跟 ...

  4. CSS解决父级边框坍塌的问题

    1. 浮动元素后面增加空的div 首先在父级标签内添加如下<div>标签 <div id="clear"></div> 然后在CSS中对该标签进 ...

  5. Redis 在 vivo 推送平台的应用与优化实践

    一.推送平台特点 vivo推送平台是vivo公司向开发者提供的消息推送服务,通过在云端与客户端之间建立一条稳定.可靠的长连接,为开发者提供向客户端应用实时推送消息的服务,支持百亿级的通知/消息推送,秒 ...

  6. Spring5源码解析系列一——IoC容器核心类图

    基本概念梳理 IoC(Inversion of Control,控制反转)就是把原来代码里需要实现的对象创建.依赖,反转给容器来帮忙实现.我们需要创建一个容器,同时需要一种描述来让容器知道要创建的对象 ...

  7. SpringCloud--feign的配置加载

    spring cloud feign我们使用 @FeignClient注解,其中有几个核心属性: @AliasFor("name") String value() default ...

  8. ELK（Elasticsearch 、 Logstash以及Kibana）

    配置日志收集系统 ELK需求背景:业务发展越来越庞大,服务器越来越多各种访问日志.应用日志.错误日志量越来越多,导致运维人员无法很好的去管理日志开发人员排查问题,需要到服务器上查日志,不方便运营人员需 ...

  9. 【Python自动化Excel】pandas操作Excel的“分分合合”

    话说Excel数据表,分久必合.合久必分.Excel数据表的"分"与"合"是日常办公中常见的操作.手动操作并不困难,但数据量大了之后,重复性操作往往会令人崩溃. ...

  10. transient关键字有何作用

    使用对象流保存对象时,将对象的全部信息都保存了,但是有些信息是不希望保存,如密码,该如何避免该信息的保存? 使用transient关键字修饰的属性,在保存对象时,该属性并不会被保存. transien ...