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" ...
随机推荐
- CF959C Mahmoud and Ehab and the wrong algorithm 构造
Mahmoud was trying to solve the vertex cover problem on trees. The problem statement is: Given an un ...
- Please tell me who you are. Run git config --global user.email "you@example.com" git config --global user.name "Your Name"
解决办法
- zabbix发送邮件脚本
#!/usr/bin/env python #-*- coding: UTF- -*- import os,sys reload(sys) sys.setdefaultencoding('utf8') ...
- 利用zookeeper生成唯一id,通用性代码
在上篇中是写死的,这章就写出通用的 package com.cxy.com.cxy.curator; import java.util.concurrent.ExecutorService; impo ...
- hdu6438 Buy and Resell 买卖物品 ccpc网络赛 贪心
题目传送门 题目描述: 有n座城市,每座城市都可以对一个物品进行一次的买进或者卖出,可以同时拥有多个物品,计算利润最大值,并且交易次数要最少.(买入卖出算两次操作) 思路: 建立两个小根堆 优先队列, ...
- SQL全文搜索引擎 Sphinx
Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索, 它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索. Sphinx特别 ...
- kafka的offset和ProcessingGuarantee
https://blog.csdn.net/xianpanjia4616/article/details/84347087 https://m.2cto.com/net/201703/616024.h ...
- TCP/IP、Http、Https、Socket的区别
网络由下往上分为物理层.数据链路层.网络层( IP协议).传输层( TCP协议).会话层.表示层和应用层(HTTP协议) 接下来我来说说个人理解其中的TCP/IP.Http.Socket的区别 TCP ...
- 5.监听器（Listener）
1.监听器简介: 监听器主要用来监听对象的创建,属性的变化,是一个实现特定接口的普通Java类. Listener接口与事件对应表: 与 ServletContext 有关 ServletContex ...
- 简述wcf应用
一.新建wcf 如下图:wcf可以简历俩种形式 1.库文件,就是一个类库文件,可以用windows服务或控制台开启. 2.服务应用程序,可以直接IIS上面发布. 二.库文件自动生成的类 接口类 usi ...