利用angularjs完成注册表单
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完成注册表单的更多相关文章
- 使用angularjs实现注册表单
本文是在学习angularjs过程中做的相应的练习 github地址 https://github.com/2016Messi/angularjs1.6-form 演示地址 https://2016m ...
- 如何利用WordPress创建自定义注册表单插件
来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- UX设计秘诀之注册表单设计,细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- Ruby Rails学习中:注册表单,注册失败,注册成功
接上篇 一. 注册表单 用户资料页面已经可以访问了, 但内容还不完整.下面我们要为网站创建一个注册表单. 1.使用 form_for 注册页面的核心是一个表单, 用于提交注册相关的信息(名字.电子邮件 ...
- Html注册表单示例
注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>. <html> <head> <title>注册表单&l ...
- 免费 PSD 下载: 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
- HTML6注册表单输入日志标题
一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
随机推荐
- flask框架----flask-script组件
Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...
- ECharts + Jquery 做大屏展示
HTML <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- MySql安装和基本管理
一.什么是数据库? mysql就是一个基于socket编写的C/S架构的软件 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流 ...
- spring总结之三(依赖注入)
DI(重要):依赖注入(Dependency Injection).一般情况下,一个类不可能独立完成一个复杂的业务,需要多个类合作共同完成,需要在类中调用其它类的方法,就要给对象赋值,程序在执行过程中 ...
- python通过sftp远程传输文件
python提供了一个第三方模块paramiko,通过这个模块可以实现两台机器之间的网络连接,sftp是paramiko的一个方法,使用sftp可以在两台机器之间互相传输 拷贝文件.然而paramik ...
- 用Java实现MVPtree——MVPtree点集内去重以及衍生出来的多维向量Hash问题
上次完成了MVPtree之后,客户又提出了MVPtree点集元素重复的问题,希望我将元素去重. 集合去重哪家强?java.util找HashSet!如果不计较元素顺序,放进去基本就没有重复元素了. 只 ...
- 使用v-bind处理class与style
普通的css引入: 变量引入: 通过定义一个变量fontColor来通过v-bind来进行绑定在h3z的class中 <!--变量引入--> <h3 :class="fon ...
- PyCharm配置Python3开发环境
PyCharm配置Python3开发环境 PyCharm的开发环境是配置在对应的工程中: 一.创建一个Project 工具栏:New - New Project 建议指定一个专门的目录 ,用来存放py ...
- ZVAL——PHP源码分析
基于 PHP 5.6.20 ZVAL——php变量实现的基础 _zval_struct 结构体的定义位于 Zend/zend.h 322 行 typedef union _zvalue_value { ...