angularjs 表单校验
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style> //验证通过不通过的样式
input.ng-valid{ border:1px green solid; background:green;}
input.ng-invalid{ border:1px red solid; background:red;}
</style>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.text = 'hello';
}]); </script>
</head> <body>
<div ng-controller="Aaa">
<form novalidate name="myForm">
//ng-model是将视图绑定Model(变量)
<input type="text" name="myText" ng-model="text" required ng-minlength="" ng-pattern="/^[a-zA-Z]+$/"> //通过名字来查找输入框
<div>{{ myForm.myText.$valid }}</div> //校验成功是true,
<div>{{ myForm.myText.$invalid }}</div> //校验成功是false,
<div>{{ myForm.myText.$pristine }}</div> //验证的值没有修改过为true修改后是false
<div>{{ myForm.myText.$dirty }}</div> //验证值修改后为true没有修改为false
<div>{{ myForm.myText.$error }}</div> //验证失败为false
</form>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style> </style>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){ $scope.regText = {//定义对象
regVal : 'default',
regList : [
{ name : 'default' , tips : '请输入用户名'},
{ name : 'required' , tips : '用户名不能为空'},
{ name : 'pattern' , tips : '用户名必须是字母'},
{ name : 'pass' , tips : '√'}
]
}; $scope.regPassword = {//定义对象
regVal : 'default',
regList : [
{ name : 'default' , tips : '请输入密码'},
{ name : 'required' , tips : '密码不能为空'},
{ name : 'minlength' , tips : '密码至少6位'},
{ name : 'pass' , tips : '√'}
]
}; $scope.change = function( reg , err ){//reg = "regText", err = {required: false, pattern: true}
for(var attr in err){
if( err[attr] == true ){
$scope[reg].regVal = attr;//$scope[regText].regVal = attr;
return;
}
}
$scope[reg].regVal = 'pass';//$scope[regText].regVal = 'pass';
};
}]); </script>
</head> <body>
<div ng-controller="Aaa">
<form novalidate name="nForm">
<div>
<label>用户名:</label>
//nForm.nText.$error返回的值是{required: false, pattern: true}这种类型
<input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">
//提示信息遍历出来,|是管道符,filter是过滤器, : 是传参数,regText.regVal是传的参数,
<span ng-repeat=" re in regText.regList | filter : regText.regVal ">
{{ re.tips }}
</span>
</div>
<div>
<label>密码:</label>
<input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="" ng-blur="change('regPassword',nForm.nPassword.$error)">
//提示信息
<span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">
{{ re.tips }}
</span>
</div>
</form>
</div>
</body>
</html>
angularjs 表单校验的更多相关文章
- angularJs表单校验(超级详细!!!)
html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...
- ng-messages AngularJs 表单校验方式
最新研究了一下表单校验,直接上代码. <!DOCTYPE html><html ng-app='app'><head> <meta charset=" ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- AngularJs轻松入门(六)表单校验
表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- AngularJS 表单
AngularJS 表单是输入控件的集合. HTML控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 H ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 关于jQuery表单校验的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- Docker学习总结(13)——从零开始搭建Jenkins+Docker自动化集成环境
本文只简单标记下大概的步骤,具体搭建各个部分的细节,还请自行搜索.第一.二部分只是对Jenkins和Docker的简单介绍,熟悉的同学请直接跳到第三部分. 一.关于Jenkins Jenkins简介 ...
- 洛谷 P3079 [USACO13MAR]农场的画Farm Painting
P3079 [USACO13MAR]农场的画Farm Painting 题目描述 After several harsh winters, Farmer John has decided it is ...
- 彻底理解tomcat是怎样多线程处理http请求并将代码执行到controller里的的
彻底理解tomcat是怎样多线程处理http请求并将代码执行到controller里的的 1.线程池,thread = threadPool.getThread(),thread.executeHtt ...
- html 标签: image也能提交form!!!
html 标签: image也能提交form! !! image也能提交form 先前常常使用"<input type="submit" value="i ...
- POJ 题目3237 Tree(Link Cut Tree边权变相反数,求两点最大值)
Tree Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 6131 Accepted: 1682 Description ...
- bzoj2768: [JLOI2010]冠军调查(双倍经验最小割)
2768: [JLOI2010]冠军调查 题目:传送门 题解: 双倍经验(1934) 代码: #include<cstdio> #include<cstring> #inclu ...
- nyoj--236--心急的C小加(动态规划&&LIS)
心急的C小加 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的时间 ...
- CxImage内存方式转换图像
最近,处于项目需要,需要将Bmp转换为JPEG格式.以前做过,采用的是GDI+的方式,该方式有一个极大地缺陷为无法实现跨平台处理.闲话少说,进入正题. CxImage cxImageBmp(pRGBB ...
- asp.net 汉字转拼音的车祸现场
asp.net 汉字转拼音 需求背景: 昨天遇到个问题,就是面对系统中集中性的要设置大批量的用户设置默认的用户名,密码,权限(角色),同时要求用户名是姓名的全拼,回头看看旁边那个哥们撸胳膊挽袖子准备一 ...
- Java经典逻辑编程50题
Java经典逻辑编程50题 2016-11-03 09:29:28 0个评论 来源:Alias_fa的博客 收藏 我要投稿 [程序1] 題目:古典问题:有一对兔子,从出生后第 ...