angularjs学习第五天笔记(第二篇:表单验证升级篇)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教。谢谢!
第五天,昨天学习了简单的表单验证,在昨天的基础上,今天主要对表单验证进一步学习研究。
今天主要学习一下几点:文本框失去焦点后验证、表单验证提示信息显示处理优化
第一、文本框失去焦点后验证
文本框失去焦点验证效果:文本框失去焦点后对其合法性验证
文本框失去焦点验证实现方式:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点为false
提示显示信息添加并列显示条件(focused)
举一个具体的练习实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.oneCount {
width: 1000px;
height: 60px;
line-height: 60px;
border-bottom: 1px solid blue;
} .oneCount .titleCount {
float: left;
width: 150px;
text-align: right;
} .oneCount .valueCount {
float: left;
width: 300px;
text-align: right;
} .oneCount .valueCount input {
width: 300px;
} .oneCount .alertCount {
float: left;
width: 520px;
margin-left: 20px;
} .oneCount .alertCount span {
float: left;
margin-left: 10px;
color: #ff0000;
} .success {
color: #19e1cf !important;
} input .ng-pristine {
color: #808080;
border-bottom: 1px solid #ff0000;
} input .ng-dirty {
color: #000000;
} input .ng-valid {
color: #000000;
} input .ng-invalid {
color: #ff0000;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myContro">
<form name="loginForm" novalidate ng-submit="submitForm()">
<div class="oneCount">
<div class="titleCount">账号:</div>
<div class="valueCount">
<input type="text" name="acount" ng-model="user.acount"
placeholder="必填:账号必须由数字字母组合,长度在6-20"
required="required" ng-minlength="6" ng-maxlength="20"
ng-pattern="/^[0-9a-zA-Z]+$/"
ng-focus />
</div>
<div class="alertCount">
<span class="warning">*</span>
<div class="warning"
ng-show="loginForm.acount.$invalid && ((!loginForm.acount.$focused && loginForm.acount.$dirty) || loginForm.submitted )">
<span class="warning"
ng-show="loginForm.acount.$error.required">acount必填</span>
<span class="warning"
ng-show="loginForm.acount.$error.minlength">最少长度为6</span>
<span class="warning"
ng-show="loginForm.acount.$error.maxlength">最大长度为20</span>
<span class="warning"
ng-show="loginForm.acount.$error.pattern">账号格式不符合要求(只能由数字和字母组成)</span>
</div>
<span class="success"
ng-show="!loginForm.acount.$focused &&loginForm.acount.$valid">账号输入正确</span>
</div>
</div>
<div class="oneCount">
<div class="titleCount">姓名:</div>
<div class="valueCount">
<input type="text" name="name" ng-model="user.name" placeholder="请输入姓名" ng-maxlength="20"
ng-focus />
</div>
<div class="alertCount">
<span class="warning" ng-show="!loginForm.name.$focused && loginForm.name.$error.maxlength">姓名最大长度为20</span>
<span class="success" ng-show="!loginForm.name.$focused && loginForm.name.$dirty && loginForm.name.$valid">姓名输入正确</span>
</div>
</div>
<div class="oneCount">
<div class="titleCount"></div>
<div class="valueCount">
<input type="submit" value="提交" style="width:40px;" />
</div>
</div>
</form>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myContro", function ($scope) {
$scope.user = {
acount: "w额外",
name: "",
age: "",
pass: "",
rePass: ""
}; $scope.submitted = false; //提交表单接受函数
$scope.submitForm = function () {
if ($scope.loginForm.$valid) {
//// 表单数据真实提交逻辑
} else {
$scope.loginForm.submitted = true;
}
}
}); app.directive('ngFocus', function () {
var FOCUS_CLASS = "ng-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function (evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function () {
ctrl.$focused = true;
});
}).bind('blur', function () {
element.removeClass(FOCUS_CLASS);
scope.$apply(function () {
ctrl.$focused = false;
})
})
}
}
})
</script>
第二、表单验证提示信息显示处理优化
上面的表单验证的提示信息在体验上不是很友好,同一个文本框有可能同时显示多个提示信息
新版本的angularjs中,引入了ngMessages指令,用于更加友好的处理方式
ngmessages同时指出提示模板引入,通过ng-messges-include 来加载外部提示模板
直接上练习例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
<form name="loginForm" novalidate ng-submit="submitForm()">
<div class="oneCount">
<div class="titleCount">账号:</div>
<div class="valueCount">
<input type="text" name="acount" ng-model="user.acount"
placeholder="必填:账号必须由数字字母组合,长度在6-20"
required="required" ng-minlength="6" ng-maxlength="20"
ng-pattern="/^[0-9a-zA-Z]+$/"
ng-focus />
</div>
<div class="alertCount">
<span class="warning">*</span>
<div class="warning" ng-messages="loginForm.acount.$error">
<ng-messages-include src="template/required.html"></ng-messages-include>
<span class="warning"
ng-message="minlength">该项最少长度为6</span>
<span class="warning"
ng-message="maxlength">该项最大长度为20</span>
<div ng-messages-include="template/numberAndZhiMu.html">
</div>
</div>
</div>
</div>
<div class="oneCount">
<div class="titleCount"></div>
<div class="valueCount">
<input type="submit" value="提交" style="width:40px;" />
</div>
</div>
</form>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-messages.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['ngMessages']);
app.controller("myContro", function ($scope) {
$scope.user = {
acount: ""
}; $scope.submitted = false; //提交表单接受函数
$scope.submitForm = function () {
if ($scope.loginForm.$valid) {
//// 表单数据真实提交逻辑
} else {
$scope.loginForm.submitted = true;
}
}
});
</script>
时间不早了,明天在仔细研究该问题
今天就到此为止,明天继续研究表单验证,明天学习包括如下几点
表单验证继续研究
指令简单了解学习
angularjs学习第五天笔记(第二篇:表单验证升级篇)的更多相关文章
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- angular学习笔记(二十)-表单验证
本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...
- Spring Boot笔记八:表单验证
所谓的表单验证,就是为了防止用户乱输入的,这个问题前端的HTML5就可以判断了,其实不需要后端来验证,这里还是讲一下后端验证 首先,我们的Person类,我们加上一些表单验证的注释,如下: packa ...
- Yii学习笔记之四(表单验证 api 翻译)
1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数 yii\base\Model::validate() 进行验证 他会返回boolean值的 ...
- 【代码笔记】Web-JavaScript-JavaScript表单验证
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Angular 表单验证 基础篇
<div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...
- 五十四:WTForms表单验证之自定义表单验证器
如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...
- 五十二:WTForms表单验证之基本使用
作用:1.做表单验证,把用户提交的数据验证是否合法2.做模板渲染 安装:pip install wtforms 表单验证1.自定义一个表单类,继承wtforms.Form2.定义好需要验证的字段,字段 ...
随机推荐
- 2019.02.17 spoj Query on a tree VI(链分治)
传送门 题意简述:给你一棵nnn个黑白点的树,支持改一个点的颜色,询问跟某个点颜色相同的连通块大小. 思路: 还是链分治 233 记fi,0/1f_{i,0/1}fi,0/1表示iii的所有颜色为0 ...
- python基本数据类型之集合
python基本数据类型之集合 集合是一种容器,用来存放不同元素. 集合有3大特点: 集合的元素必须是不可变类型(字符串.数字.元组): 集合中的元素不能重复: 集合是无序的. 在集合中直接存入lis ...
- Codeforces Round #486 (Div. 3) D. Points and Powers of Two
Codeforces Round #486 (Div. 3) D. Points and Powers of Two 题目连接: http://codeforces.com/group/T0ITBvo ...
- ELK学习
[root@log-node1 ~]# cobbler repo add --name=logstash-2.3 --mirror=http://packages.elastic.co/logstas ...
- 找出数组中求和等于y的所有子数组
算法记录: 给定一个数组x,每个元素都是正整数,找出其中满足条件"求和等于y"的所有子数组.(简化问题,每个元素都不相等) x=[x1,...,xn],暴力搜索,复杂度O(2^n) ...
- WPF学习笔记(6):DataSet更新后台数据库个别列失败的问题
WPF窗体中建有一个DataGrid,运行后修改各行数据,通过Update方法更新后台数据库.发现在数据库中,其中一列FAcctID(文本型)每次都会变为0,还有一列FDebit(货币型)不能更新,其 ...
- [.net core学习] .net core中的MD5CryptoServiceProvider取代方法
使用:MD5 m5 = MD5.Create(); 参考:http://stackoverflow.com/questions/27216121/alternatives-of-md5cryptose ...
- MySQL 数据类型说明解释
在 MySQL 中,有三种主要的类型:Text(文本).Number(数字)和 Date/Time(日期/时间)类型. Text 类型: 数据类型 描述 CHAR(size) 保存固定长度的字符串(可 ...
- box-sizing:border-box的作用
其实一直没仔细研究过CSS3新增的这个属性box-sizing,只是经常会看到其它网页和公司项目里面有用到这个属性,然后就百度找到了一篇不错的介绍 https://www.jianshu.com/p/ ...
- Java 项目UML反向工程转化工具
今天在看一个模拟器的源码,一个包里有多个类,一个类里又有多个属性和方法,如果按顺序看下来,不仅不能对整个模拟器的框架形成一个大致的认识,而且只会越看越混乱,所以,想到有没有什么工具可以将这些个类以及它 ...