ng-init="username = 'first'"设置初始显示first字段
ng-class="{'error':signUpForm.username.$invalid && signUpForm.username.$touched}"验证表单是否未通过,touched验证是否有用过
ng-if='signUpForm.username.$valid'输入合法即干。。。
minlength="4" 最小四个字符
maxlength="10" 最大十个字符

ng-submit 只能给form用
ng-disabled 用于将一些东西不可用

输入密码与确认密码比较注册了一个compare指令

angular.module('myapp',[]).directive('compare',function () {

  var com ={};
  // 命令作用于元素和属性中
  com.strict = "AE" ;
  com.scope = {
    //之前的这个字符,@对应字符串,=对应数据,&对应函数
    orgText :'=compare'
  }
  com.require = 'ngModel';
  /*
  *scope域,$scope
  *ele 当前元素
  *attr属性
  *control ngModel
  *v 用户输入值
  */
  com.link = function (scope,ele,attr,control) {
    control.$validators.compare = function(v){
      return v ==scope.orgText;
    }
    //与之前的orgText比较
    scope.$watch('orgText',function(){
      //一旦有变化则开始验证
      control.$validate();
    })
  }
  return com;
})

代码地址:https://github.com/fanpeiyao/angularForm.git

利用angularjs完成注册表单的更多相关文章

  1. 使用angularjs实现注册表单

    本文是在学习angularjs过程中做的相应的练习 github地址 https://github.com/2016Messi/angularjs1.6-form 演示地址 https://2016m ...

  2. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  3. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  4. UX设计秘诀之注册表单设计,细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  5. Ruby Rails学习中:注册表单,注册失败,注册成功

    接上篇 一. 注册表单 用户资料页面已经可以访问了, 但内容还不完整.下面我们要为网站创建一个注册表单. 1.使用 form_for 注册页面的核心是一个表单, 用于提交注册相关的信息(名字.电子邮件 ...

  6. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  7. 免费 PSD 下载: 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  8. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  9. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

随机推荐

  1. python 爬虫基础知识一

    网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动的抓取万维网信息的程序或者脚本. 网络爬虫必备知识点 1. Python基础知识2. P ...

  2. .net大型平台通过Nginx做负载均衡(Web层、中间服务层、DB层)

    .net平台下,我目前部署过的均衡负载有两种方式(iis7和Nginx),以下以Nginx为例讲解web层的均衡负载. 简介:Nginx 超越 Apache 的高性能和稳定性,使得国内使用 Nginx ...

  3. puts函数

    1.puts函数是gets函数的输出版本,它把指定的字符串写到标准输出并在末尾添加一个换行符 #include <stdio.h> #include <stdlib.h> in ...

  4. Kattis之旅——Chinese Remainder

    Input The first line of input consists of an integers T where 1≤T≤1000, the number of test cases. Th ...

  5. JavaScript笔记 #07# 用js写算法

    算法盒子初代(为了提高学习算法的热情...) 效果图: 所有代码放在单个html中: <!DOCTYPE html> <html> <head> <meta ...

  6. pyqt5 界面切换

    QStackedWidget 只需要关联好对应的信号和槽,调用setCurrentIndex函数,想切哪个界面就切到哪个界面

  7. oracle parallel_index hint在非分区表的生效

    之前没特别注意,在有些场景下希望使用并行索引扫描的时候,发现parallel_index hint并没有生效,于是抽空看了下文档:The PARALLEL_INDEX hint instructs t ...

  8. rabbitmq集群故障恢复详解

    RabbitMQ的mirror queue(镜像队列)机制是最简单的队列HA方案,它通过在cluster的基础上增加ha-mode.ha-param等policy选项,可以根据 需求将cluster中 ...

  9. python之字符编码(四)

    一.字符编码的使用: 1.文本编辑器 unicode----->encode-------->utf-8 utf-8-------->decode---------->unic ...

  10. 火车时刻表WebApp

    关键词 :Ajax 跨域访问 php 同源策略 JQueryMobile 前言 在面试的过程中,兄弟连的徐老师提出要求我用JQuery Mobile(前端框架)来实现一个具有“火车时刻表”功能的Web ...