其实我们的angularjs都是是块状代码，其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了。。

废话不多说，直接上代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/amazeui.min.css">

    <script src="js/jq2.js"></script>

    <script src="js/amazeui.min.js"></script>

</head>

<body ng-app="myapp">

<div style="width: 250px; margin: 0 auto" ng-controller="forms">

    <form ng-submit="sub(ckform.$valid)" name="ckform">

        <div class="am-alert {{color}} " data-am-alert ng-show="errorMsg.length > 0">

            <button type="button" class="am-close">&times;</button>

            <p>{{errorMsg}}</p>

        </div>

        <h1>登录表单</h1>

        <div class="am-input-group">

            <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>

            <input type="text" name="user" class="am-form-field" placeholder="Username" ng-model="user.name" required ng-minlength="5" >

        </div>

        <p>

        <p>

            <!--下面的ckform 和上面表单 form 的name里面的值 是一样的-->

            <!--下面的name 和上面表单里面的name值 是一样的-->

            $pristine 【没修改】：{{ckform.user.$pristine }}<br>

            $dirty【修改过】：{{ckform.user.$dirty}}<br>

            $invalid【验证失败】：{{ckform.user.$invalid}}<br>

            $invalid【验证成功】：{{ckform.user.$valid}}<br>

            $error【错误详情】：{{ckform.user.$error}}<br>

        </p>

        </p>

        <div class="am-input-group">

            <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>

            <input type="password" class="am-form-field" placeholder="Password" ng-model="user.pass" >

        </div>

        <div class="am-g" style="margin-top: 15px">

            <div class="am-u-sm-6 am-text-center">

                <button type="submit" class="am-btn am-btn-success" >登录</button>

            </div>

            <div class="am-u-sm-6 am-text-center">

                <button type="button" class="am-btn am-btn-default">取消</button>

            </div>

        </div>

    </form>

</div>

</body>

<script src="js/angular.min.js"></script>

<script>

    var module = angular.module("myapp",[]);

    module.controller('forms',function($scope){

        $scope.user = {name:'',pass:''};

        $scope.errorMsg = '';

        $scope.login = function(){

            console.log($scope.user.name);

            console.log($scope.user.pass);

            if(/*$scope.user.name == 'admin' && */$scope.user.pass == 'admin888'){

                $scope.errorMsg = 'YES~~~~';

                $scope.color = "am-alert-success";

            }else{

                $scope.errorMsg = 'NO~~~~~';

                $scope.color = "am-alert-danger";

            }

        }

        $scope.sub = function(ckval){  //这里的ckval相当于form 表单头的$valid

            //required 必须要填写

            //ng-minlength 最短

            //ng-maxlength 最长

            //ng-pattern 正则

            //

            console.log(ckval);

            if(!ckval){

                $scope.errorMsg = "骚年错误啦";

                $scope.color = "am-alert-danger";

            }else{

                $scope.errorMsg = '骚年不错噢~~~~';

                $scope.color = "am-alert-success";

            }

        }

    })

</script>

</html>

效果展示：

夺命雷公狗—angularjs—3—表单验证的高级用法的更多相关文章

  1. 夺命雷公狗—angularjs—9—ng-class的自定义函数的用法

    angularjs里面其实给我们留下了一个很不错的地方,他就是可以直接调用函数从而对该位置进行处理, 被点击后展示效果如下所示: 开始走代码吧.... <!doctype html> &l ...

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

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

  3. angularjs的表单验证

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

  4. 夺命雷公狗—angularjs—6—单条数据的遍历

    我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html ...

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

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

  6. angularJS 过滤器 表单验证

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

  7. AngularJS 的表单验证

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

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

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

  9. AngularJs实现表单验证

    首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...

随机推荐

  1. fprintf与fwrite函数用法与差异

    在C语言中有两个常见的保存文件的函数:fprintf 与 fwrite.其主要用法与差异归纳如下: 一.fprintf函数. 1.以文本的形式保存文件.函数原型为 int fprintf(FILE* ...

  2. UITableView & UITableViewController

    内容概要: 本文先讲解了UITableView概述,然后主要从应用方面讲解了UITableViewController(包括add.delete.move单元cell的操作,以及UITableView ...

  3. CSS知识点补充

    一.css框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素 1.css内边 ...

  4. iOS 时间戳

    时间戳用过一回,总结一下: 1.在Terminal下获得时间戳: date +%s 原来要在服务器端挂文档,方便开发商下载,用时间戳作为文件名称来区分. 2.在程序下获得时间戳: NSDate * n ...

  5. Java: Difference between ArrayList and LinkedList

    Basically, they are just two different implementations of List interface. LinkedList is implemented ...

  6. Android 开发之如何保证Service不被杀掉（broadcast+system/app）

    序言 最近项目要实现这样一个效果:运行后,要有一个service始终保持在后台运行,不管用户作出什么操作,都要保证service不被kill,这可真是一个难题.参考了现今各种定制版的系统和安全厂商牛虻 ...

  7. struts配置测试中遇到报错信息，记录下

    tomcat7 jdk7myeclipse2014 部署完成后,访问页面报错struts.xml文件内容: <?xml version="1.0" encoding=&quo ...

  8. Android系统自带样式(@android:style/)

    在AndroidManifest.xml文件的activity中配置 1.android:theme="@android:style/Theme" 默认状态,即如果theme这里不 ...

  9. VMWare ESXi 5.5安装及配置

    VMWare ESXi 5.5安装大概过程如下:制作虚拟化ESXi系统的USB启动盘,安装ESXi系统到USB,用USB启动ESXi系统.比较难理解,下面图解过程. 下载UNetbootin   (下 ...

  10. RAID讲解

    RAID定义 RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘, ...