Angular 学习笔记——表单验证
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('may',['$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:'密码大于六位'},
{name:'pass',tips:'√'}
] };
$scope.change = function (reg,err){
for(var attr in err){
if(err[attr] == true){
$scope[reg].regVal = attr;
return
}
}
$scope[reg].regVal = 'pass';
} }])
</script>
</head>
<body>
<div ng-controller='may'>
<form novalidate name="myform">
<div>
<label>用户名:</label>
<input type="text" name="nusername" ng-model='regText.name' required ng-pattern='/^[a-zA-Z]+$/' ng-blur="change('regText',myform.nusername.$error)">
<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='6' ng-blur="change('regPassword',myform.nPassword.$error)">
<span ng-repeat='re in regPassword.regList | filter:regPassword.regVal'>{{re.tips}}</span>
</div>
</form>
</div>
</body>
</html>
Angular 学习笔记——表单验证的更多相关文章
- angular中的表单验证
angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...
- 学习W3SCHOOL 表单验证
//表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
- php学习笔记——表单
13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...
- AngularJs学习笔记-表单处理
表单处理 (1)Angular表单API 1.模板式表单,需引入FormsModule 2.响应式表单,需引入ReactiveFormsModule (2)模板式表单 在Angular中使用for ...
- 吴裕雄--天生自然 PHP开发学习：表单 - 验证邮件和URL
$name = test_input($_POST["name"]); if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $ ...
- 吴裕雄--天生自然 PHP开发学习：表单验证
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- ZendFramework2学习笔记 表单过滤、表单验证
ZF2有非常多内建的Filter和Validator组件,能够方便地对表单数据进行处理. Filter的作用是过滤表单数据.比如,去除一些空格,替换一些敏感词等. Validator的作用是检验表单数 ...
- SpringMVC学习系列- 表单验证
本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...
随机推荐
- 如何在Windows2008中禁用IPv6
我自己修复此问题 更改 DisabledComponents 注册表值 您可以通过将DisabledComponents注册表值的主机上禁用 IPv6.DisabledComponents注册表值会影 ...
- 转：Android ListView 异步加载图片
http://www.iteye.com/topic/1118828 http://www.iteye.com/topic/1127914 这样做无疑是非常可取的方法,但是加载图片时仍然会感觉到轻微的 ...
- 飞思卡尔MC9S12系列单片机地址影射以及分页问题
对于用MCU的人来说,不一定要明白HCS12(x) memory map的机制和联系.因为如果没有系统地学习操作系统和编译原理之类的课程,确实有些难度.并且,对于DG128 XS128这样的MCU,默 ...
- This Android SDK requires Android Developer Toolkit version 20.0.0 or above
本人最近在操作更新ANDROID SDK时出现类似于题目中的错误,是一启动ECLIPSE时.但是,我现在只是想恢复到原先的开发环境.于是找到本文,方法有效!!! windows 下面安装Android ...
- 设计模式-python实现
设计模式是什么? 设计模式是经过总结.优化的,对我们经常会碰到的一些编程问题的可重用解决方案.一个设计模式并不像一个类或一个库那样能够直接作用于我们的代码.反之,设计模式更为高级,它是一种必须在特定情 ...
- (5)C#工具箱-数据
1.DataSet 2.DataGridView dataGridView是一个显示网络数据的控件 (1)绑定dataSet DataSet ds = new DataSet(); //执行数据库查询 ...
- Python的扩展接口[2] -> 动态链接库DLL[1] -> 组件对象模型 COM 的 Python 调用
组件对象模型 COM 的 Python 调用 关于COM的基本概念,可参考组件对象模型 COM的内容,下面主要介绍两种使用 Python 调用 COM 组件的方法. 1 使用 win32com 1.1 ...
- Python的网络编程[1] -> FTP 协议[0] -> FTP 的基本理论
FTP协议 / FTP Protocol FTP全称为File Transfer Protocol(文件传输协议),常用于Internet上控制文件的双向传输,常用的操作有上传和下载.基于TCP/IP ...
- navicat连接MySQL8.0.11提示2059错误
错误原因:mysql加密规则的改变: mysql加密规则:mysql_native_password mysql8之前的版本 caching_sha2_password mysq ...
- Frequency
题目描述 Snuke loves constructing integer sequences. There are N piles of stones, numbered 1 through N. ...