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" ...
随机推荐
- 在PowerShell中操作SharePoint对象
1. 用PowerShell创建一个SharePoint内容对象创建一个自定义列表:$SPSite = New-Object Microsoft.SharePoint.SPSite("htt ...
- 【三支火把】--- shell脚本中变量的类型及作用域
一直对shell脚本有一种特殊的感觉,因此花了一段时间学习,本人擅长C语言编程,深受C语言荼毒,在学习其他任何类似于编程语言的东东的时候,都会不自觉的与C进行对比,因此对于shell中的变量的作用域一 ...
- 数据结构11: 栈(Stack)的概念和应用及C语言实现
栈,线性表的一种特殊的存储结构.与学习过的线性表的不同之处在于栈只能从表的固定一端对数据进行插入和删除操作,另一端是封死的. 图1 栈结构示意图 由于栈只有一边开口存取数据,称开口的那一端为“栈顶”, ...
- CF709B Checkpoints 模拟
Vasya takes part in the orienteering competition. There are n checkpoints located along the line at ...
- mac os x忘记了root密码怎么办，忘记登录密码（普通帐号密码）也是一样的
有时候我们给mac设置了root密码,一段时间不用,却忘记了密码,怎么办?下面的办法帮你解决: 步骤1:先关闭你的mac系统 步骤2:开机,按住Command和s两个按键不松手直到出现下面的界面: 步 ...
- MySQL 关联查询 内连接
内连接 [INNER| CROSS] JOIN无条件内连接:无条件内连接,又名交叉连接/笛卡尔连接第一张表种的每一项会和另一张表的每一项依次组合#例:mysql> select * ...
- 【笔记】MySQL学习之索引
[笔记]MySQL学习之索引 一 索引简单介绍 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取即可. 普通 ...
- git学习--clone和pull
clone:从远程服务器克隆一个一模一样的版本库到本地,复制的是整个版本库.(clone是将一个库复制到你的本地,是一个本地从无到有的过程) pull:从远程服务器获取到一个branch分支的更新到本 ...
- javscript---Bom 和Dom
JavaScript分为 ECMAScript,DOM,BOM. ECMA javascript标准语法 BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScrip ...
- Ubuntu 安装 phpredis扩展
官网 https://github.com/phpredis/phpredis 下载->然后解压->上传服务器 /etc/phpredis 进行 cd /etc/phpredisphpiz ...