首先，我们应该知道，表单中，常用的验证操作有：

$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实现表单验证的更多相关文章

  1. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  2. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  3. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  4. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  5. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  6. AngularJS复习------表单验证

    在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...

  7. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

  8. AngularJS form表单验证（非常全面)

    构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...

  9. AngularJS的表单验证提交示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...

随机推荐

  1. 在Winform系统界面中对进展阶段的动态展示和处理

    在我们做客户关系管理系统的Winform界面的时候,需要对进展阶段这个属性进行一个方便的动态切换和标记处理,如我们根据不同的进展阶段显示不同的相关信息,也可以随时保存当前的阶段信息.其实也是一个比较常 ...

  2. 是时候理解下HTTPS的原理及流程了

    1.什么是HTTP协议? HTTP协议是Hyper Text Transfer Protocol(超文本传输协议),位于TCP/IP模型当中的应用层.HTTP协议通过请求/响应的方式,在客户端和服务端 ...

  3. 随心测试_软测基础_006<测试人职业发展>

    接上篇:熟悉了_测试人员的工作职责范围与具体的工作内容 ,如何规划:测试人员的职业路线呢? 贴心小提示:以下内容,仅供参考,不挖坑 Q1:如何规划测试工程师的职业发展路线? A1:SX的观点:预定目标 ...

  4. Flask自定义转换器，实现路由匹配正则表达式参数

    Flask框架动态路由实现参数传递和Django框架有类似之处,但是相比于Django框架,Flask实现复杂的参数就需要自己自定义转换器来实现了,而不能向Django那样直接使用正则表达式 # 路由 ...

  5. dpdk-18.11开发库编译安装

    简介 dpdk官网 安装 下载 点击下载地址,选择合适的版本下载.这里下载DPDK 18.11.0 (LTS)版本. 编译 将下载的dpdk-18.11.tar.xz上传服务器,解压,这里放在了/op ...

  6. XAMPP支持多PHP版本

    在使用xampp进行开发的时候,我们都知道它只能支持一个PHP版本不能像PHPstudy那样方便进行不同版本的切换操作.因此我们手动的对于xampp进行改造一下,使其支持其他PHP版本 1. 从官网上 ...

  7. JS学习笔记：（三）JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

  8. Linux(Ubuntu)使用日记------Mongodb的安装与使用

    1.安装 Linux下安装mongodb还是比较容易的 直接使用apt-get安装即可,命令如下: sudo apt-get install mongodb 安装完成之后进行检验, “mongo sh ...

  9. react 入坑笔记（六） - 组件的生命周期

    React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...

  10. 北京2018网络赛A题

    题意:给你一个迷宫,迷宫有开始节点和结束节点,问你从开始走到结束的最小时间,其中,#代表这个点有毒气,身上必须带着氧气瓶才行,B代表每次进入这个点可以带一个氧气瓶,最多身上带五个,P代表进入这个点加速 ...