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

<!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. IO复习

    /* 字节流 输入字节流: ---------| InputStream 所有输入字节流的基类. 抽象类 ------------| FileInputStream 读取文件的输入字节流 ------ ...

  2. Hibernate与JDBC事务整合

    一般大家都会使用Spring声明型事务 transactionAttributes 为 PROPAGATION_REQUIRED Hibernate 使用 HibernateTransactionMa ...

  3. Pollard's rho algorithm和涉及到的两个循环检测算法

    0. 简单介绍 Pollard的\(\rho\)算法是John Pollard在1975年发明的,用于分解质因数[1].假定被分解的数为N,N的最小的质因数为\(p(p\ne N)\),那么该算法可以 ...

  4. requests库session保持持久会话

      requests中cookie的原理 http://blog.csdn.net/zhu_free/article/details/50563756   requests - cookies的实现例 ...

  5. Solution -「CodeChef JUMP」Jump Mission

    \(\mathcal{Description}\)   Link.   有 \(n\) 个编号 \(1\sim n\) 的格子排成一排,并有三个权值序列 \(\{a_n\},\{h_n\},\{p_n ...

  6. Redis学习详解（一）：Redis持久化机制之RDB

    Redis的持久化机制有两种:RDB持久化和AOF持久化.因为Redis是一个内存数据库,如果没有合适的持久化机制,那么一旦服务器进程退出,服务器中的数据库状态也会消失.本章介绍RDB持久化机制. R ...

  7. WPF + Winform 解决管理员权限下无法拖放文件的问题

    wpf,winform混合解决管理员权限无法拖放文件的问题 学习自: https://zhuanlan.zhihu.com/p/343369663 https://zhuanlan.zhihu.com ...

  8. libc++abi.dylib: terminating with uncaught exception of type NSException

    这是微信sdk注册时候报的错误 解决方法 选择Build Setting,在"Other Linker Flags"中加入"-Objc -all_load"

  9. log4j的替换方案

    去年12月份,随着log4j暴露出高危漏洞,对于 Java 开发人员来说不是一个好消息,对于 Ops 来说更是如此.前者必须使用固定的 Log4J 版本重新打包他们的应用程序,而后者必须重新部署.但对 ...

  10. 微服务从代码到k8s部署应有尽有系列（十四、部署环境搭建）

    我们用一个系列来讲解从需求到上线.从代码到k8s部署.从日志到监控等各个方面的微服务完整实践. 整个项目使用了go-zero开发的微服务,基本包含了go-zero以及相关go-zero作者开发的一些中 ...