其实我们的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. git warning解决方案

    1.warning: LF will be replaced by CRLF in xxxxx. 设置: git config core.autocrlf false

  2. [LeetCode]题解（python）：079 Word Search

    题目来源 https://leetcode.com/problems/word-search/ Given a 2D board and a word, find if the word exists ...

  3. 我的工具箱之MySql Front 5.3

    下载地址:http://pan.baidu.com/s/1i4sJpNB 这款软件用来连接MySql,作为前端使用. 它功能全面,方便快捷,如果说有缺点的话,sql窗口中不能执行选择的部分有遗憾. 2 ...

  4. 表单设置line-height，在ff中的不垂直居中问题？？？

    在ff中有时候input中的line-height,是有bug存在的,设置了line-height,发现文字并不是垂直居中. 1.这是正常现象,不需要刻意调整样式 2.以后尽量使用button,来避免 ...

  5. Python迁移MySQL数据到MongoDB脚本

    MongoDB是一个文档数据库,在存储小文件方面存在天然优势.随着业务求的变化,需要将线上MySQL数据库中的行记录,导入到MongoDB中文档记录. 一.场景:线上MySQL数据库某表迁移到Mong ...

  6. apt-get -y install中的-y是什么意思?

    是同意的意思.没有 -y的命令也可以执行,系统会提示你是否安装,输入y,回车,就会安装了 apt-get -y install这个指令则是跳过系统提示,直接安装.

  7. MOGRE学习笔记（3）--MOGRE小项目练习

    学习OGRE有一段时间了,领导为了检测学习效果,根据已有C++项目,弄一个类似的用c#语言编写的小项目. 配置:win7,DirectX2009,vs2010. 项目要求: 1.有Ogre窗口(尺寸1 ...

  8. 选择年份 php的写法要比js简洁一些

    所以遇到下拉框默认选择的情况,用php写比较方便一些 <select type="text" class="form-control_2" name=&q ...

  9. Wget命令

    Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机,处理这样的 ...

  10. 【关于HBITMAP, DC, MEM DC, Clipboard】将HBITMAP拷贝到Clipboard（Windows Clipboard & OLE Clipboard）

    参考: Programming Windows with MFC, 2nd. Chapter 18, 19. 建议把这两章学习完(至少到OLE drag-and-drop之前要学习完)再来尝试OLE ...