angularjs学习第五天笔记（第二篇：表单验证升级篇）
原创angularjs学习第五天笔记（第二篇：表单验证升级篇）
原创
小小许
修改于 2018-08-31 09:43:57
修改于 2018-08-31 09:43:57
您好，我是一名后端开发工程师，由于工作需要，现在系统的从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>时间不早了，明天在仔细研究该问题
今天就到此为止，明天继续研究表单验证，明天学习包括如下几点
表单验证继续研究
指令简单了解学习
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读