angularjs学习第四天笔记（第一篇：简单的表单验证）
您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！
第四天，简单的表单验证，今天主要学习了angularjs中的表单验证的一些基本概念及其简单应用
第一、表单验证的简单理解
表单验证是angularjs中比较重要的一个核心功能
表单验证可以结合html5的验证特殊使用，当然也可以禁用浏览器对表单的默认验证，添加属性【novalidate】即可
表单验证毕竟只是前端js验证，在后端代码中一定需要对其数据的合法性做再次验证
angularjs提供了一些常见的系统验证，当然也可以自定义表单验证
第二、简单了解学习anjularjsz自带的表单验证
1.必填验证：required，直接添加required属性即可
2.最小长度：ng-minlength，使用ng-minlength=“最小长度值”
3.最大长度：ng-maxlength,使用ng-maxlength=“最大长度值”
4.模式匹配：ng-pattern，使用ng-pattren="模式匹配的正则表达式"
5.邮箱：email,使用直接给文本框的type属性值赋值为email即可--type="email"
6.数字：number,使用直接给文本框的type属性值赋值为number即可--type="number"
7.网页地址：url,使用直接给文本框的type属性值赋值为url即可--type="url"
第四、表单中的控制变量
1.表单的属性值访问方式为：表单名称.文本框名称.属性名称
2.表单验证中用到的表单属性包括如下：
未修改的表单：属性名称关键词【pristine】，bool类型，如果为修改为ture
用户修改过的表单：属性关键词【dirty】,bool类型,只有修改了就为true
合法的表单：属性关键词【valid】，bool类型，只有当表单内容合法才为true
不合法表单：属性关键词【invalid】，bool类型，只要有不合法的都为true
错误：属性关键词【error】,bool类型，只要有不合法的都为true
第五、简单实现注册页面的表单验证
在实现的方式上，根据不同的体验，大致有三种方式
其一、对表单输入实时验证，只有表单验证都通过，才提交表单
实现方式：通过控制提交按钮的可用性来实现
ng-disabled="loginForm.$invalid"
下面举例一个练习实例：
<!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]+$/"/>
</div>
<div class="alertCount">
<span class="warning">*</span>
<span class="warning" ng-show="loginForm.acount.$dirty&&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>
<span class="success" ng-show="loginForm.acount.$dirty&&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" />
</div>
<div class="alertCount">
<span class="warning" ng-show="loginForm.name.$error.maxlength">姓名最大长度为20</span>
<span class="success" ng-show="loginForm.name.$dirty&&loginForm.name.$valid">姓名输入正确</span>
</div>
</div>
<div class="oneCount">
<div class="titleCount">年龄：</div>
<div class="valueCount">
<input type="number" name="age" ng-model="user.age" placeholder="请输入年龄" />
</div>
</div>
<div class="oneCount">
<div class="titleCount">密码：</div>
<div class="valueCount">
<input type="password" name="pass" ng-model="user.pass" placeholder="必填：请输入密码，密码长度在6-20"
required="required" ng-minlength="6" ng-maxlength="20" />
</div>
<div class="alertCount">
<span class="warning">*</span>
<span class="warning" ng-show="loginForm.pass.$dirty&&loginForm.pass.$error.required">密码必填</span>
<span class="warning" ng-show="loginForm.pass.$error.minlength">最少长度为6</span>
<span class="warning" ng-show="loginForm.pass.$error.maxlength">最大长度为20</span>
<span class="success" ng-show="loginForm.pass.$dirty&&loginForm.pass.$valid">密码输入正确</span>
</div>
<div class="oneCount">
<div class="titleCount"></div>
<div class="valueCount">
<input type="submit" value="提交" ng-disabled="loginForm.$invalid" 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: "",
name: "",
age: "",
pass: "",
rePass: ""
}; //提交表单接受函数
$scope.submitForm = function () {
//// 表单真实提交逻辑
alert("提交表单");
}
}); </script>
其二、先触发提交表单事件，在统一对表单数据验证，只有同验证通过才提交数据到后台处理
实现方式：可以给表单添加一个属性，初始化赋值为false，只有提交后才赋值为ture
验证结果提示信息，只有该属性值为true,才显示显示错误信息
<!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]+$/"/>
</div>
<div class="alertCount">
<span class="warning">*</span>
<span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&loginForm.acount.$error.required">acount必填</span>
<span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.minlength">最少长度为6</span>
<span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.maxlength">最大长度为20</span>
<span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.pattern">账号格式不符合要求（只能由数字和字母组成）</span>
<span class="success" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&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" />
</div>
<div class="alertCount">
<span class="warning" ng-show="loginForm.submitted&&loginForm.name.$error.maxlength">姓名最大长度为20</span>
<span class="success" ng-show="loginForm.submitted&&loginForm.name.$dirty&&loginForm.name.$valid">姓名输入正确</span>
</div>
</div>
<div class="oneCount">
<div class="titleCount">年龄：</div>
<div class="valueCount">
<input type="number" name="age" ng-model="user.age" placeholder="请输入年龄" />
</div>
</div>
<div class="oneCount">
<div class="titleCount">密码：</div>
<div class="valueCount">
<input type="password" name="pass" ng-model="user.pass" placeholder="必填：请输入密码，密码长度在6-20"
required="required" ng-minlength="6" ng-maxlength="20" />
</div>
<div class="alertCount">
<span class="warning">*</span>
<span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$error.required">密码必填</span>
<span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.minlength">最少长度为6</span>
<span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.maxlength">最大长度为20</span>
<span class="success" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$valid">密码输入正确</span>
</div>
<div class="oneCount">
<div class="titleCount"></div>
<div class="valueCount">
<input type="submit" value="提交" style="width:40px;" />
</div>
</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: "",
name: "",
age: "",
pass: "",
rePass: ""
};
$scope.submitted = false;
//提交表单接受函数
$scope.submitForm = function () {
if ($scope.loginForm.$valid) {
//// 表单数据真实提交逻辑
} else {
$scope.loginForm.submitted = true;
}
}
}); </script>
其三、失去焦点后验证
时间不早了，明天在仔细研究该问题
今天就到此为止，明天继续研究表单验证，明天学习包括如下几点
表单失去焦点的验证
表单提示信息展示优化，以便提高代码复用性
自定义表单验证
angularjs学习第四天笔记（第一篇：简单的表单验证）的更多相关文章
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- jQuery笔记（五）jQuery表单验证
前言 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以有效的提高用户体验.在此之前 ...
- angularjs学习第五天笔记（第二篇：表单验证升级篇）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- angular学习笔记(二十)-表单验证
本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...
- ActionBarSherlock学习笔记 第一篇——部署
ActionBarSherlock学习笔记 第一篇--部署 ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...
- angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- 《javascript权威指南》读书笔记——第一篇
<javascript权威指南>读书笔记——第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本 ...
- Scala语言笔记 - 第一篇
目录 Scala语言笔记 - 第一篇 1 基本类型和循环的使用 2 String相关 3 模式匹配相关 4 class相关 5 函数调用相关 Scala语言笔记 - 第一篇 最近研究了下scala ...
- Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介)
原文:Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介) 版权声明:本文为博主原创文章,遵循CC 4.0 BY ...
随机推荐
- centos7配置Hadoop集群环境
参考: https://blog.csdn.net/pucao_cug/article/details/71698903 设置免密登陆后,必须重启ssh服务 systermctl restart ss ...
- 如何将uniurlframe中html调用delphi的函数
uniGUI总群中台中cmj朋友为我们总结了如下内容,对于利用delphi+uniGUI开发应用,可以说是精品,必须掌握. 一句话,如何在html与delphi间交互代码,是最好的答案. [Clien ...
- mysql 存储过程 CONCAT 字符串拼接
mysql 存储过程 CREATE PROCEDURE pro_province_report (IN startDate VARCHAR(),IN endDate VARCHAR(),IN Sour ...
- SDWebImage之SDWebImageDownloader
SDWebImageDownloader完成了对网络图片的异步下载工作,准确说这个类是一个文件下载的工具类,真正的网络请求是在继承于NSOperation的SDWebImageDownloaderOp ...
- 使用TheFolderSpy监控文件夹的变化-邮件通知
一.概述 当我们的文档或者代码文件发布在公网.共享文件夹中,其他用户具备访问或修改的权限时,就存在文档被覆盖或删除的分享.另外一个典型的场景,发布在Web服务器上的网页文件,在网站版本不更新的时间,服 ...
- YUM仓库安装LAMP与LNMP
LAMP动态网站部署架构是由一套 Linux+Apache+MySQL+PHP 组成的动态网站系统解决方案. LNMP动态网站部署架构是由一套 Linux+Nginx+MySQL+PHP 组成的动态网 ...
- 1.html基础标签:文本+链接+图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端IM开发者必读(二)：史上最全移动弱网络优化方法总结
1.前言 本文接上篇<移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”>,关于移动网络的主要特性,在上篇中已进行过详细地阐述,本文将针对上篇中提到的特性,结合我们的实践经 ...
- 火狐浏览器安装 Modify Headers 插件
一.火狐浏览器插件安装 这里以火狐浏览器的Modify Headers插件安装为例,展示火狐插件的安装: 1.打开火狐浏览器,右上角选择“附加组件” 2.搜索Modify Headers插件 3.安装 ...
- ElasticSearch权威指南学习（索引管理）
创建索引 当我们需要确保索引被创建在适当数量的分片上,在索引数据之前设置好分析器和类型映射. 手动创建索引,在请求中加入所有设置和类型映射,如下所示: PUT /my_index { "se ...