AngularJS表单验证开发案例
angular支持IE8+浏览器，虽然性能很好，但是目前只适用于手机端项目
知识点：
域$scope
AngularJS基础指令
指令实现不同的功能
学习思路和方法
<link rel="stylesheet" href="lib/css/bootstrap.min.css"/>
<body ng-app="myApp" ng-controller="MainController">
angular.module('myApp', [])
.controller('MainController', function ($scope) {
$scope.submitForm = function () {
console.log('表单提交了');
};
});
/***********************************/
<input class="form-control" type="text" ng-model="name" ng-minlength="4" ng-maxlength="10"/>
<div class="red">{{name}}</div>
<div>{{name}}</div>
<div>{{name}}</div>
<div>{{name}}</div>
<div>{{name}}</div>
<div>{{name}}</div>
<div>{{name}}</div>
/*******************************/ <form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用户名：</label>
<input type="text"
name="username"
ng-model="username"
ng-class="{'error': signUpForm.username.$invalid}"
required
ng-minlength="4"
class="form-control"
/>
<div>{{username}}</div>
<div ng-if="signUpForm.username.$invalid &&
signUpForm.username.$touched">您输入的有误差</div>
<div ng-if="signUpForm.username.$valid" class="correct">
恭喜输入正确
</div>
</div>
</form> /******************************/ <form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用户名：</label>
<input type="text"
name="username"
ng-model="username"
ng-class="{'error': signUpForm.username.$invalid}"
required
ng-minlength="4"
class="form-control"
/>
<input type="text"
name="username2"
ng-model="username2"
class="form-control"
ng-disabled="signUpForm.username.$valid"
/>
<button class="btn btn-primary" ng-disabled="signUpForm.$invalid">提交</button>
</div>
</form> /**********************************/ <style>
.wrapper {
width: 200px;
margin: 30px auto;
}
</style>
</head>
<body ng-app="myApp" ng-controller="MainController"> <div class="wrapper">
<h2>注册</h2>
<form>
<div class="form-group">
<label>用户名：</label>
<input type="text" name="username" class="form-control"/>
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" name="password" class="form-control"/>
</div>
<div class="form-group">
<label>确认密码：</label>
<input type="password" name="password2" class="form-control"/>
</div>
</form>
</div> /****************************/ <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="lib/css/bootstrap.min.css"/>
<style>
.wrapper {
width: 200px;
margin: 30px auto;
}
p.error {
color: red;
/* display: none;*/
}
pre {
white-space: normal;
}
p.input-result {
position: relative;
top: -26px;
left: 179px;
}
p.success {
color: #3C763D;
}
</style>
</head>
<body ng-app="myApp" ng-controller="MainController">
<!-- name="signUpForm" 注册表单 -->
<div class="wrapper">
<h2>注册</h2>
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group" ng-class="{'has-success': signUpForm.username.$valid}">
<label>用户名：</label>
<pre>合法：{{signUpForm.username.$valid}}</pre>
<pre>{{signUpForm.username}}</pre>
<input type="text"
name="username"
class="form-control"
ng-model="userdata.username"
required
ng-minlength="4"
ng-maxlength="32"
/>
<p class="error" ng-if="signUpForm.username.$error.required
&& signUpForm.username.$touched">
用户名不可为空
</p>
<p class="error" ng-if="(signUpForm.username.$error.minlength
|| signUpForm.username.$error.maxlength) && signUpForm.username.$touched">
用户名长度应在4~32位之间
</p>
<p class="fa fa-check input-result success"
ng-if="signUpForm.username.$valid"></p>
</div>
<div class="form-group" ng-class="{'has-success': signUpForm.password.$valid}">
<label>密码：</label>
<input type="password"
name="password"
class="form-control"
ng-model="userdata.password"
required
ng-minlength="6"
ng-maxlength="18"
/>
<p class="error" ng-if="signUpForm.password.$error.required
&& signUpForm.password.$touched">
密码不得为空
</p>
<p class="error" ng-if="(signUpForm.password.$error.minlength
|| signUpForm.password.$error.maxlength)
&& signUpForm.password.$touched">
密码应该在6~18位之间
</p>
<p class="fa fa-check input-result success"
ng-if="signUpForm.password.$valid"></p>
</div>
<div class="form-group" ng-class="{'has-success': signUpForm.password2.$valid}">
<label>确认密码：</label>
<input type="password"
name="password2"
class="form-control"
ng-model="userdata.password2"
required
compare="signUpForm.password"
/>
<p class="error"></p>
</div>
<div class="form-group">
<button class="btn btn-primary">注册</button>
</div>
</form>
</div> <script src="lib/js/angular.min.js"></script>
<script src="js/main.js"></script>
angular.module('myApp', [])
.controller('MainController', function ($scope) {
$scope.userdata = {};
$scope.submitForm = function () {
console.log('表单提交了');
// $scope.userdata是表单提交的内容
console.log($scope.userdata);
// Object {username: "aaa", password: "123456", password2: "456789"}
if($scope.signUpForm.$invalid) {
alert('请检查你输入的内容');
} else {
alert('提交成功！');
}
};
})
// 创建指令
.directive('compare', function () {
var o = {};
return o;
});
AngularJS表单验证开发案例的更多相关文章
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- [Angularjs]表单验证
写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
- AngularJs表单验证
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
- AngularJS 表单验证小结
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...
- angularjs 表单验证（不完整版）
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...
- 彻底弄懂angularJS表单验证
常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...
随机推荐
- OkHttp 3.x 源码解析之Interceptor 拦截器
拦截器 Java里的拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行,同时也提供了一种可以提 ...
- P3554 [POI2013]LUK-Triumphal arch
\(\color{#0066ff}{ 题目描述 }\) 给一颗树,1号节点已经被染黑,其余是白的,两个人轮流操作,一开始B在1号节点,A选择k个点染黑,然后B走一步,如果B能走到A没染的节点则B胜,否 ...
- 最短路【洛谷P1841】 [JSOI2007]重要的城市
P1841 [JSOI2007]重要的城市 题目描述 参加jsoi冬令营的同学最近发现,由于南航校内修路截断了原来通向计算中心的路,导致去的路程比原先增加了近一公里.而食堂门前施工虽然也截断了原来通向 ...
- log4j配置文件及java调用 每个级别输出到不同的文件
#配置根Logger log4j.rootLogger = DEBUG , RollingFile,CONSOLE #文件大小达到一定尺寸的时候创建一个新的文件 log4j.appender.Roll ...
- C语言中的预处理命令
预处理功能是C语言的重要功能. 问:为什么要预处理,什么是预处理? 答:我们知道高级语言的运行过程是通过编译程序(编译器)把源代码翻译成机器语言,实现运行的.编译程序的工作包含:语法分析.词法分析.代 ...
- ListItemType.AlternatingItem 和 ListItemType.Item
项目中后台绑定Reapter项时,判断 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.Alte ...
- day18 约束 异常
1. 类的约束 方案一:抛出异常,子类必须重写父类方法,否则会报错 class Base: def login(self): #强制xxx做XXX事 raise NotImplementedError ...
- web服务器Nginx环境下如何实现安全证书https的配置
https跟http的关系 https没出现之前,我们网站大多数都是http开头,http全名超文本传输协议,客户端据此获取服务器上的超文本内容.超文本内容则以HTML为主,客户端拿到HTML内容后可 ...
- java从笨鸟到菜鸟
链接别人的笔记 http://www.cnblogs.com/cugwx/p/3536840.html
- C++ vector类型要点总结（以及各种algorithm算法函数）
概述 C++内置的数组支持容器的机制,但是它不支持容器抽象的语义.要解决此问题我们自己实现这样的类.在标准C++中,用容器向量(vector)实现. 容器向量也是一个类模板.vector是C++标准模 ...