AngularJs实现表单验证
首先，我们应该知道，表单中，常用的验证操作有：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息， $error支持的验证有：required/minlength/maxlength/pattern/email/number/date/url等
然后，验证时，需给表单，及需要验证的input，设置name属性；给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中。故，可以使用 formName.inputName.$验证操作
若要实现上图表单验证功能，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
<style type="text/css">
.row{
margin-bottom: 10px;
}
.row .col-xs-5{
text-align: center;
}
.suc{
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.suc:focus{
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
} .err{
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.err:focus{
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
</style>
</head> <body ng-app="app" ng-controller="ctrl">
<div class="container" style="width: 40%; margin: 50px auto; padding: 0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">
用户注册
</div>
</div> <div class="panel-body">
<form action="" method="get" class="form-horizontal" name="myForm" novalidate>
<div class="row" >
<div class="col-xs-3">
用户名：
</div>
<div class="col-xs-9">
<input type="text" class="form-control" ng-model="user.name" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{suc:myForm.name.$valid && myForm.name.$dirty,err:myForm.name.$invalid && myForm.name.$dirty}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.name.$invalid && myForm.name.$dirty">
<!--当有填写记录且不合法时，p显示-->
<span ng-show="myForm.name.$error.required">用户名必须填写！！！</span>
<span ng-show="myForm.name.$error.minlength">用户名最少包含4个字符！！！</span>
<span ng-show="myForm.name.$error.maxlength">用户名最多包含10个字符！！！</span>
</p>
</div>
</div> <div class="row">
<div class="col-xs-3">
邮箱：
</div>
<div class="col-xs-9">
<input type="email" class="form-control" ng-model="user.mail" name="mail" required ng-class="{suc:myForm.mail.$valid && myForm.mail.$dirty,err:myForm.mail.$invalid && myForm.mail.$dirty}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.mail.$invalid && myForm.mail.$dirty">
<!--当有填写记录且不合法时，p显示-->
<span ng-show="myForm.mail.$error.required">邮箱必须填写！！！</span>
<span ng-show="myForm.mail.$error.email">邮箱格式不合法！！！</span>
</p>
</div>
</div> <div class="row">
<div class="col-xs-3">
密码：
</div>
<div class="col-xs-9">
<input type="password" class="form-control" ng-model="user.pwd" name="pwd" pattern="^\w{6,18}$" required ng-class="{suc:myForm.pwd.$valid && myForm.pwd.$dirty,err:myForm.pwd.$invalid && myForm.pwd.$dirty}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.pwd.$invalid && myForm.pwd.$dirty">
<!--当有填写记录且不合法时，p显示-->
<span ng-show="myForm.pwd.$error.pattern">密码应为6-18位，且只能为字母、数字、下划线</span>
</p>
</div> </div> <div class="row">
<div class="col-xs-3">
确认密码：
</div>
<div class="col-xs-9">
<input type="password" class="form-control" ng-model="rePwd" name="rePwd" required ng-class="{suc:myForm.rePwd.$dirty&&rePwd==user.pwd,err:myForm.rePwd.$dirty&&rePwd!=user.pwd}"/>
<p style="color: red; margin: 0px;" ng-show="myForm.rePwd.$dirty && rePwd!=user.pwd">
<!--当有填写记录且不合法时，p显示-->
两次密码输入不一致！！！
</p>
</div>
</div> <div class="row">
<div class="col-xs-5">
<input type="submit" value="注册" class="btn btn-success" ng-disabled="myForm.$invalid || rePwd!=user.pwd" />
</div>
<div class="col-xs-5">
<input type="button" value="重置" class="btn btn-warning" ng-click="resets()" />
</div>
</div>
</form>
</div>
</div> </div> </body>
<script src="libs/angular.js"></script> </html>
AngularJs实现表单验证的更多相关文章
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- angularjs的表单验证
angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- AngularJS 的表单验证
最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...
- AngularJS复习------表单验证
在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...
- 夺命雷公狗—angularjs—3—表单验证的高级用法
其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...
- AngularJS form表单验证（非常全面)
构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...
- AngularJS的表单验证提交示例
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...
随机推荐
- 修饰符-static
一.static静态修饰符 static修饰符能够修饰属性,方法,初始代码块,不能修饰局部变量和类. 静态的变量叫常量,非静态的变量叫实例变量. 1.修饰属性 package gc.test.java ...
- UOJ #269. 【清华集训2016】如何优雅地求和
UOJ #269. [清华集训2016]如何优雅地求和 题目链接 给定一个\(m\)次多项式\(f(x)\)的\(m+1\)个点值:\(f(0)\)到\(f(m)\). 然后求: \[ Q(f,n,x ...
- lombok使用
下载地址 链接:https://pan.baidu.com/s/19Rz7sgasVv5Gc7vw1A4whA 提取码:6bgg lombok的安装: 使用lombox是需要安装的,如果不安装,IDE ...
- 逆向工程核心原理-IA-32寄存器
IA-32由四类寄存器组成:通用寄存器,段寄存器,程序状态与控制寄存器,指令指针寄存器. 通用寄存器:用于传送和暂存数据,也可参与算数逻辑运算,并保存运算结果. EAX(0-31) 32位 ...
- Nonlinear Component Analysis as a Kernel Eigenvalue Problem
目录 引 kernel PCA kernel 的选择 性质 一些问题 代码 Scholkopf B, Smola A J, Muller K, et al. Nonlinear component a ...
- JS 设计模式七 -- 外观模式
概念 为子系统中的一组接口提供一个一致的界面,定义一个高层接口,这个接口使子系统更加容易使用. 外观模式在JS中,可以认为是一组函数的集合. 实现 // 三个处理函数 function start() ...
- NodeJs之服务搭建与数据库连接
NodeJs之服务搭建与数据库连接 一,介绍与需求分析 1.1,介绍 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻 ...
- TOMCAT原理详解及请求过程（转载）
转自https://www.cnblogs.com/hggen/p/6264475.html TOMCAT原理详解及请求过程 Tomcat: Tomcat是一个JSP/Servlet容器.其作为Ser ...
- squid3.5缓存代理实践记录
准备: 两台服务器,一台web,一台squid缓存代理 squid机域名:www.dannylinux.top web机IP:12.1.1.1 1.版本: [root@danny squid]# sq ...
- document对象获取例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...