<!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. Cisco IPC Emergency Responder Error

    Upon startup of the newer Cisco IP Communicator clients (especially on Windows Vista/7), sometimes y ...

  2. python--jinja2

    from jinja2 import Template # 创建一个Template模板去渲染它 s = "my name is {{mashiro}}" t = Template ...

  3. python里如何计算大文件的md5

    在python3中,有了一个hashlib,可以用来计算md5,这里先给出一个简单的例子: import hashlib sstr="i love hanyu" print(has ...

  4. git 本地与远程关联流程

    git init git add -A git commit -m '提交' git remote add origin git@github.com:laniu/liuna.git git push ...

  5. 使用Sublime Text 3 编写python

    1,下载Sublime Text 3 链接:http://pan.baidu.com/s/1eROBpB0 密码:cqjr 2,安装 注意安装时去掉捆绑的软件安装选项,有两处. 3,安装完成打开软件, ...

  6. 【原创】Win7 IE故障：APPCRASH，d3d9.dll，c0000005

    问题 今天使用使用IE登录某网址,发现总是报错,如下图,无法浏览. 解决方案 主要讲IE的呈现方案修改即可,如下步骤: 在IE的[Internet选项]选择[高级]选项卡,在[加速的图形]中勾选[使用 ...

  7. JavaScript js 兼容浏览器问题 兼容Fire

    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...

  8. bzoj 2843: 极地旅行社

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1077  Solved: 645[Submit][Status][Discuss] Descripti ...

  9. Netbeans 中部署运行Webservice出错

      错误如下 at java.lang.StackTraceElement at public java.lang.StackTraceElement[] java.lang.Throwable.ge ...

  10. 50个最常用的UNIX/Linux命令

    转自http://get.jobdeer.com/493.get 1. tar command examples Create a new tar archive. $ tar cvf archive ...