其实我们的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. 安装MVC3后没有dbcontext生成器的解决方案

    安装MVC3后,采用DBFIRS的方式,从数据库生成模型,这样生成的类是基于ObjectContext的,无法使用DbContext的一些方法,比如Set.Find.Entry等.需要用ADO.NET ...

  2. 我的第一个WCF程序，很简单适合我等菜鸟

    1.首先我罗列一下网站搜索并经过自己理解的WCF的含义: 1)WCF:(WIndows Communication Foundation)是由微软是由微软发展的一组数据通信的应用开发接口,可以翻译为W ...

  3. c# 并行运算

    c# 并行运算 1. Parallel.INVOKE() 看实例: private static Stopwatch watch = new Stopwatch(); private static v ...

  4. jenkins自动构建截图

  5. 8月17日 Power-BI关于全国房地产开发投资情况分析 QQ群视频交流开课啦

    <ignore_js_op> 数读|中国的经济只剩下房地产了么? 引言: 近日一则标题为“房奴们又立功啦,7月份新增贷款几乎都来自房贷!”的报道吸引了大众的目光.该报道指出在央行8月13日 ...

  6. Login failed知多少

    说起Login failed我们首先会想起密码错误,但密码错误只是众多login failed中的一个,本篇将罗列各类login failed在ERRORLOG中的表现,以及如何提取这类错误信息.通过 ...

  7. nginx 414 Request-URI Too Large

    症状 nginx 414 Request-URI Too Large #客户端请求头缓冲区大小,如果请求头总长度大于小于128k,则使用此缓冲区, #请求头总长度大于128k时使用large_clie ...

  8. 转：VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径

    http://www.cnblogs.com/lidabo/archive/2012/05/29/2524170.html

  9. 解决：Detected memory leaks

    最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks!Dumping objects ->{171} normal block at 0x05785AD0, ...

  10. Http authentication（BASIC, DIGEST）

    Http authentication....BASIC: In the context of an HTTP transaction, basic access authentication is ...