angularjs php登录验证,AngularJs表单验证的方法
Anjularjs表单验证
能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要。
表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。
AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便。AngularJS提供了很多表单验证指令。
Your email
要使用表单验证,首先要确保表单像上面的例子一样有一个 name 属性。
所有输入字段都可以进行基本的验证,比如最大、最小长度等。这些功能是由新的HTML5表单属性提供的。
如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记
1. 必填项 required
验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记 required 即可:
注释:required 属性适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file
2. 最小长度 ng-minleng="{number}"
验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令 ng-minleng="{number}"
3. 最大长度 ng-maxlength="{number}"
验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令 ng-maxlength="{number}"
4. 模式匹配 ng-pattern="/PATTERN/"
使用 ng-pattern="/PATTERN/" 来确保输入能够匹配指定的正则表达式:
5. 电子邮件
验证输入内容是否是电子邮件,只要像下面这样将 input 的类型设置为 email 即可:
6. 数字
验证输入内容是否是数字,将 input 的类型设置为 number :
7. URL
验证输入内容是否是URL,将 input 的类型设置为 url :
在表单中控制变量
表单的属性可以在其所属的 $scope 对象中访问到,而我们又可以访问 $scope 对象,因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性,我们可以对表单做出实时(和AngularJS中其他东西一样)响应。这些属性包括下面这些。(注意,可以使用下面的格式访问这些属性。)
formName.inputFieldName.property
■未修改的表单
这是一个布尔属性,用来判断用户是否修改了表单。如果未修改,值为 true ,如果修改过值为 false
formName.inputFieldName.$pristine
■修改过的表单
只要用户修改过表单,无论输入是否通过验证,该值都返回 true
formName.inputFieldName.$dirty
■合法的表单
这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的,下面属性的值就是 true :
formName.inputFieldName.$valid
■ 不合法的表单
这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的,下面属性的值为 true :
formName.inputFieldName.$invalid
■ 错误
这是AngularJS提供的另外一个非常有用的属性: $error 对象。它包含当前表单的所有验证内容,以及它们是否合法的信息。用下面的语法访问这个属性:
formName.inputfieldName.$error
$parsers
当用户同控制器进行交互,并且 ngModelController 中的 $setViewValue() 方法被调用时,$parsers 数组中的函数会以流水线的形式被逐个调用。第一个 $parse 被调用后,执行结果会传递给第二个 $parse ,以此类推
这些函数可以对输入值进行转换,或者通过 $setValidity() 函数设置表单的合法性。
使用 $parsers 数组是实现自定义验证的途径之一。
例如,假设我们想要确保输入值在某两个数值之间,可以在 $parsers 数组中入栈一个新的函数,这个函数会在验证链中被调用。
每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回undefined 。
html
表单测试
good
bad
{{ testForm.inputs.$valid }}
{{ testForm.inputs.$invalid }}
{{ obj.number }}
javascript ( test5app.js )
angular.module('myApp', []).controller('TestController', function($scope) {
$scope.obj = {
number: 34
}
}).directive('ngTest', function() {
return {
require: '?ngModel',
restrict: 'AE',
link: function($scope, iElm, iAttrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.push(function(viewValue) {
var num = parseInt(viewValue);
if (num >= 0 && num < 99) {
ngModel.$setValidity('test', true);
return viewValue
} else {
ngModel.$setValidity('test', false);
return undefined
}
})
}
}
});
angularjs php登录验证,AngularJs表单验证的方法相关推荐
- 表单验证-通用表单验证大全/通用表单验证函数收集
表单验证-通用表单验证大全/通用表单验证函数收集_Web设计论坛 文章来源:IT人才网(http://www.ad0.cn) Javascript表单验证函数大全: 复制内容到剪贴板代码: <s ...
- angularjs表单验证_AngularJS表单验证
angularjs表单验证 We have updated this article for Angular 1.3 and the new ng-touched feature. 我们已经为Angu ...
- Angularjs总结(一)表单验证
常用的表单验证 1.必须字段 html5特性 增加required <input type="text" required /> 2.最小长度和最大长度 <inp ...
- ext form验证tip_FormValidator表单验证
表单校验测试 验证表单之文本输入框 用户名: 性别: 男女 出生年月: 身份证号 邮箱 学历 --请选择-- 专科 本科 研究生 硕士 博士 国家区号 -地区区号 -电话号码 -分机号码 兴趣爱好 乒 ...
- php ci提交表单验证,ci表单验证代码
概述 这是只考虑php对表单数据的接收处理.至于js部分以前会结合validate来讲解下 在解释 CodeIgniter 的数据验证处理之前,让我们先描述一下一般的情况: 一个表单显示了. 你填写并 ...
- php ci框架 自动验证,CodeIgniter表单验证方法实例详解
本文实例讲述了CodeIgniter表单验证方法.分享给大家供大家参考,具体如下: 1.在D:\CodeIgniter\system\application\views目录下写一个视图文件myform ...
- 栈 php 验证格式,表单验证 - 《Biny - 高性能轻量级PHP框架》 - 书栈网 · BookStack...
表单验证 框架提供了一套完整的表单验证解决方案,适用于绝大多数场景. 表单验证支持所有类型的验证以及自定义方法 简单示例:namespaceapp\form; usebiny\lib\Form; /* ...
- php form表单验证,Validform表单验证总结篇
近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法: Demo:$(".demoform").Validform( ...
- python表单验证_python表单验证封装
在Web程序中往往包含大量的表单验证的工作,如:判断输入是否为空,是否符合规则. hello hostname: ip: port: phone: HTML #!/usr/bin/env python ...
- php表单验证_PHP表单验证:简介
php表单验证 In previous articles I've looked at creating an accessible form using HTML. At the time I me ...
最新文章
- linux 下jdk的卸载与安装
- JS contcat() 连接数组 函数
- android弹出窗口的实现(PopupWindow)
- 计算机视觉:基于YOLO-V3林业病虫害目标检测
- oracle查看jdk文档_Oracle JDK 9 Early Access文档已更新
- 去掉边框_安卓也有堪比 VOUN 的加边框应用了,素材丰富到没朋友
- 恭喜你!在25岁前看到了这篇最最靠谱的深度学习入门指南
- python如何仿写文章_python,python3.x_求助,用python仿写以下代码,python,python3.x,java - phpStudy...
- PTA-6-1 数组循环右移 (20分)(C语言)
- 95-190-540-源码-window-清除器(Evictors)-TimeEvitor简介
- mybatis实战总结
- 机器人弹古筝图片_古筝维修:40年的牡丹牌古筝,动了个外科手术
- 怎么用计算机求正切值的角度,在excel中如何使用正切函数计算,excel函数tan怎么反算角度...
- 3DGIS地理信息系统设计方案
- 分库分表学习总结(1)——数据库中间件MyCat学习总结之MyCat入门简介
- 基于锁的并发数据结构
- 关于图像处理分析的一些理解
- CxImage学习使用1:环境搭建
- Ubuntu下安装最新的搜狗输入法
- C++实现简单的工资管理系统
热门文章
- 北京44岁程序员失业,感叹:编程估计没戏了,想去卖煎饼果子
- 每日一皮:当代互联网企业真实写照!
- 招聘 | B站前端架构师(直播)
- 都在说微服务,那么微服务的反模式和陷阱是什么(二)
- 普林斯顿计算机科学系,普林斯顿大学计算机科学系
- html页面怎样禁止复制粘贴,javascript中如何禁止复制粘贴?
- java grizzly_java grizzly实现http服务器
- linux+mmap父子通信_linux库函数mmap()原理?转载
- 帝国cms后台上传大视频上传m3u8批量上传一次多个的解决思路和方法
- python计算平行线