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

<!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. 简单模拟Java中反射的应用场景

    有人说Java是一门静态语言.那么何为静态语言,动态语言又是什么? 1.动态语言 是一类在运行时可以改变其结构的语言:例如新的函数.对象.甚至代码可以 被引进,已有的函数可以被删除或是其他结构上的变化 ...

  2. 浅谈.net core如何使用EFCore为一个上下文注类型注入多个实例用于连接主从数据库

    在很多一主多从数据库的场景下,很多开发同学为了复用DbContext往往采用创建一个包含所有DbSet<Model>父类通过继承派生出Write和ReadOnly类型来实现,其实可以通过命 ...

  3. Solution -「LOCAL」「cov. 牛客多校 2020 第三场 I」礼物

    \(\mathcal{Description}\)   给定排列 \(\{a_n\}\),求字典序第 \(K\) 大的合法排列 \(\{b_n\}\).称一个排列 \(\{p_n\}\) 合法,当且仅 ...

  4. erange.heetian.com 回显任意账号

      首先获取你想登录ID的REG标识符,例如合天课程专家  获取标识符ba84d3c3-a4a1-4cd2-a00d-2f5722ee86a2 一般用户前缀为REG,这个肯定是管理员之类的= =.. ...

  5. PHP7.x环境下安装redis扩展

    注:以下介绍的安装方式为PHP的安装路径为/usr/local/php,如果你的服务器上PHP的安装目录不一致请按实际情况处理. 首先下载PHP7的redis扩展 wget https://githu ...

  6. Grafana v8.3.3 & jmeter-influxdb2-backend

    1. 说明 接上篇文章,今天继续聊Grafana & influxdb2-backend. 2. Grafana v8.3.3安装 下载rpm包 wget https://dl.grafana ...

  7. SonarQube之采购选型参考

    SonarQube是DevOps实践中主流的一款质量内建工具,过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具,比如pmd-cpd.checkstyle.findbugs ...

  8. PRML 概率分布

    本文地址:https://www.cnblogs.com/faranten/p/15917369.html 转载请注明作者与出处 1 二元变量 1.1 伯努利分布与二项分布 ​ 考虑一个最基本的试验: ...

  9. spring中容器和对象的创建流程

    容器和对象的创建流程 1.先创建容器 2.加载配置文件,封装成BeanDefinition 3.调用执行BeanFactoryPostProcessor 准备工作: 准备BeanPostProcess ...

  10. [LeetCode]1365. 有多少小于当前数字的数字

    给你一个数组 nums,对于其中每个元素 nums[i],请你统计数组中比它小的所有数字的数目. 换而言之,对于每个 nums[i] 你必须计算出有效的 j 的数量,其中 j 满足 j != i 且 ...