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" ...
随机推荐
- ELK+Filebeat 实践 Error : read tcp 192.168.0.2:48968->121.40.216.20:5044: i/o timeout
问题描述: 这是一个i/o time 的问题,一般考虑就是磁盘满的问题.以下是我遇到的具体问题: 1.Kibana页面刷新,没有新数据出来,再次刷新或者点击页面上其他地方,kibana就变成这样了: ...
- pg10.1 orafce3.6 安装
安装unzip orafce-mastermv orafce-master /opt/soft_bak/postgresql-10.1/contribcd /opt/soft_bak/postgres ...
- 平衡树学习笔记（3）-------Splay
Splay 上一篇:平衡树学习笔记(2)-------Treap Splay是一个实用而且灵活性很强的平衡树 效率上也比较客观,但是一定要一次性写对 debug可能不是那么容易 Splay作为平衡树, ...
- System.Collections.Generic.List<T> 与 System.Collections.ArrayList
[推荐] System.Collections.Generic.List<T> [原因] 泛型集合类List<T>在操作值类型的集合时可以不进行 装箱/拆箱 处理. 使得性能较 ...
- Codeforces Round #334（div.2）（新增不用二分代码） B
B. More Cowbell time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 1065. A+B and C (64bit) (20)
Given three integers A, B and C in [-263, 263], you are supposed to tell whether A+B > C. Input S ...
- php设计模式总结2
策略模式: 定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 封装:把行为用接口封装起来,我们可以把那些经常变化的部分,从当前的类中单独取出来,用接口进行单 ...
- Java使用Array类创建多维数组
1.创建一维数组 import java.lang.reflect.Array; public class ArrayTest { public static void main(String[] a ...
- hdu2068 RPG的错排
RPG的错排 时间限制:1000/1000 MS(Java / Others)内存限制:32768/32768 K(Java / Others)总提交内容:16421接受的提交内容:6670 问题描述 ...
- 服务器查看外网IP地址和方法
返回IP地址 curl ip..com/ip.aspx curl whatismyip.akamai.com wget -qO - ifconfig.co curl icanhazip.com dig ...