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" ...
随机推荐
- asp.net mvc 中的 controller和asp.net web api 的apicontroller有什么区别？(转)
本质上区别不大,一个返回html/text类型的response,一个返回json/text或者xml/text类型的response,对于api环境而言,apicontroller更智能一点,他可以 ...
- pytorch 检测图片中是否有人
照搬pytorch官方代码,只是将数据集换成了INRIAPerson数据集中的train和test文件夹. 贴下代码和效果,代码是官方的,就不详细解释了. # License: BSD # Autho ...
- spring boot 很好的文章
http://blog.csdn.net/isea533/article/details/50278205
- svg 日常操作
创建svg 文件 <svg> </svg> 详解viewBox SVG Viewport.View Box和preserveAspectRatio 形状 标签内的值可以是百 ...
- Github如何在Linux系统下创建本地仓库
一.电脑上安装 Git Ubuntu安装GIt: apt-get install git 查看版本信息: git version 配置Git用户信息 输入: git config --glo ...
- C#中web项目使用log4net日志
我准备把log4net的实现方法放在一个类库项目中,别的项目直接引用该类库,即可进行日志的记录,操作步骤如下: 1.下载log4net.dll文件 2.在解决方案下创建类库项目 3.把log4net. ...
- ST表（查询区间最值问题）
ST表与线段树相比,这是静态的,无法改动,但是他的查询速度比线段树要快,这是牺牲空间换时间的算法. O(nlogn)预处理,O(1)查询.空间O(nlogn). ][]; ]; void rmq_in ...
- 如何将微信上传AMR格式语音转化为MP3格式
1. 服务器安装ffmpeg 2. 执行命令 ffmpeg -i {amr_file_path} -f mp3 -acodec libmp3lame -y {mp3_file_path} public ...
- 在IntelliJ IDEA中配置Google Java Code Style及代码格式化快捷键
google-java-format plugin should intercept the “Reformat Code” action in IDEA (Ctrl+Alt+L) and apply ...
- 练习五十三：for循环练习
对100以内的两位数,请使用一个两重循环打印出所有十位数都比各位数字小的数,并统计个数 l = [] for i in range(1,9): for j in range(i): l.append( ...