<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="js/angular-1.3.0.js"></script>

    <script>

        var m1 = angular.module('myApp',[]);

        m1.controller('may',['$scope',function($scope){

            $scope.regText = {

                regVal:'default',

                regList : [

                    {name:'default',tips:'请输入用户名'},

                    {name:'required',tips:'用户名不能为空'},

                    {name:'pattern',tips:'用户名必须是字母类型'},

                    {name:'pass',tips:'√'}

                ]

            };

            $scope.regPassword = {

                regVal:'default',

                regList : [

                    {name:'default',tips:'请输入密码'},

                    {name:'required',tips:'密码不能为空'},

                    {name:'minlength',tips:'密码大于六位'},

                    {name:'pass',tips:'√'}

                ]

            };

            $scope.change = function (reg,err){

                for(var attr in err){

                    if(err[attr] == true){

                        $scope[reg].regVal = attr;

                        return

                    }

                }

                $scope[reg].regVal = 'pass';

            }

        }])

    </script>

</head>

<body>

    <div ng-controller='may'>

        <form novalidate name="myform">

            <div>

                <label>用户名:</label>

                <input type="text" name="nusername" ng-model='regText.name' required ng-pattern='/^[a-zA-Z]+$/' ng-blur="change('regText',myform.nusername.$error)">

                <span ng-repeat='re in regText.regList | filter:regText.regVal'>{{re.tips}}</span>

            </div>

            <div>

                <label>密码:</label>

                <input type="password" name="nPassword" ng-model='regPassword.name' required ng-minlength='6' ng-blur="change('regPassword',myform.nPassword.$error)">

                <span ng-repeat='re in regPassword.regList | filter:regPassword.regVal'>{{re.tips}}</span>

            </div>

        </form>

    </div>

</body>

</html>

Angular 学习笔记——表单验证的更多相关文章

  1. angular中的表单验证

    angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...

  2. 学习W3SCHOOL 表单验证

    //表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

  3. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  4. php学习笔记——表单

    13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...

  5. AngularJs学习笔记-表单处理

    表单处理 (1)Angular表单API 1.模板式表单,需引入FormsModule 2.响应式表单,需引入ReactiveFormsModule   (2)模板式表单 在Angular中使用for ...

  6. 吴裕雄--天生自然 PHP开发学习：表单 - 验证邮件和URL

    $name = test_input($_POST["name"]); if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $ ...

  7. 吴裕雄--天生自然 PHP开发学习：表单验证

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  8. ZendFramework2学习笔记 表单过滤、表单验证

    ZF2有非常多内建的Filter和Validator组件,能够方便地对表单数据进行处理. Filter的作用是过滤表单数据.比如,去除一些空格,替换一些敏感词等. Validator的作用是检验表单数 ...

  9. SpringMVC学习系列- 表单验证

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

随机推荐

  1. wordpress对使用的国外主题进行本地汉化

    wordpress有非常多优秀与专业的主题,当然大多数是非中文的 这些主题本身总会有些无法通过wordpress admin后台来配置的在页面上的英文输出 此时你可以去对应的代码去改掉那些输出,不过这 ...

  2. linux启动流程梳理【转】

    接触linux系统运维已经好几年了,常常被问到linux系统启动流程问题,刚好今天有空来梳理下这个过程:一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下 ...

  3. Eclipse中使用Maven创建Web时错误

    一.问题描述 使用Eclipse创建Maven项目时,报一下错误,不能创建成功. 二.问题原因 错误详细描述是说 Could not resolve archetype org.apache.mave ...

  4. 战斗机的祈雨仪式（NOIP模拟赛Round 7）

    [问题描述] 炎炎夏日,如果没有一场大雨怎么才能尽兴?秋之国的人民准备了一场祈雨仪式.战斗机由于拥有操纵雷电的能力,所以也加入了其中,为此,她进行了一番准备. 战斗机需要给自己的Spear of Lo ...

  5. 使用QML创建界面（转）

    原文转自 https://blog.csdn.net/rl529014/article/details/51378307 在Qt编程中,我们可以使用纯C++代码,或C++和XML结合的方式来创建GUI ...

  6. How to duplicate a UIButton in Objective C?

    http://stackoverflow.com/questions/1092875/how-to-duplicate-a-uibutton-in-objective-c 1down vote To ...

  7. Redis设置记录

    首先大前提是,这个redis使用的外网端口,需要在防火墙或者安全组中打开 正常在redis配置文件里有个bind,这个默认是127.0.0.1,如果不修改,就是内网可以访问. 这里有个点需要提一下,就 ...

  8. HDU 1166.敌兵布阵-完全版线段树(单点增减、区间求和)

    生活艰辛,且行且珍惜. 先水一篇博客再去补题,要不然又忘记写博客了. 计划系统的刷一遍线段树专题,自己给自己找虐(自作孽不可活),从基础的到后面的,所有的都挂了题,刷题不,大兄弟? 线段树可真有意思, ...

  9. 洛谷 P1060 开心的金明【DP/01背包】

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就 ...

  10. POJ 1298 The Hardest Problem Ever【字符串】

    Julius Caesar lived in a time of danger and intrigue. The hardest situation Caesar ever faced was ke ...