angularjs表单注册--两次密码验证
html
<div class="container" ng-controller="RegisterCtrl">
<form name="loginForm" ng-submit="submitForm()">
<div class="form-group" ng-class={'has-success':loginForm.username.$valid}>
<lable>用户名:</lable>
<input type="text" name="username" class="form-control" ng-model="userdata.username" ng-minlength="4" ng-maxlength="32" required>
<p class="error" ng-if="loginForm.username.$error.required &&loginForm.username.$touched">请输入用户名</p>
<p class="error" ng-if="(loginForm.username.$error.minlength||loginForm.username.$error.maxlength)&&loginForm.username.$touched">用户名应在4到32位之间</p>
</div>
<div class="form-group" ng-class={'has-success':loginForm.password.$valid}>
<lable>密码:</lable>
<input type="password" name="password" class="form-control" ng-model="userdata.password" ng-minlength="6" ng-maxlength="64" required>
<p class="error" ng-if="loginForm.password.$error.required &&loginForm.password.$touched">请输入密码</p>
<p class="error" ng-if="(loginForm.password.$error.minlength||loginForm.password.$error.maxlength)&&loginForm.password.$touched">密码应在6到64位之间</p>
</div>
<div class="form-group" ng-class={'has-success':loginForm.password.$valid}>
<lable>密码:</lable>
<input type="password" name="password2" class="form-control" ng-model="userdata.password2" compare="userdata.password" ng-minlength="6" ng-maxlength="64" required>
<p class="error" ng-if="loginForm.password2.$error.required &&loginForm.password2.$touched">请输入密码</p>
<p class="error" ng-if="(loginForm.password2.$error.minlength||loginForm.password2.$error.maxlength)&&loginForm.password2.$touched">密码应在6到64位之间</p>
<p class="error" ng-if="loginForm.password2.$error.compare &&loginForm.password2.$dirty">两次密码不一致</p>
</div>
<button class="btn btn-primary">注册</button>
</form>
</div>
js
第一种写法
.controller('RegisterCtrl', function($scope) {
$scope.userdata = {};
$scope.submitForm = function() {
console.log($scope.userdata);
if ($scope.loginForm.$invalid) {
alert('请检查您的信息')
} else {
alert('注册成功!')
}
}
})
.directive('compare', function() {
var o = {};
o.strict = 'AE';
o.scope = {
orgText: '=compare'
}
o.require = 'ngModel';
o.link = function(scope, elem, att, con) {
con.$validators.compare = function(v) {
return v == scope.orgText;
}
scope.$watch('orgText', function() {
con.$validate();
});
}
return o;
});
第二种写法
.directive('compare',function(){
return{
strict:'AE',
require:'ngModel',
scope:{
orgText:'=compare'
},
link:function(scope,elemt,attars,con){
con.$validators.compare = function(v) {
return v == scope.orgText;
}
scope.$watch('orgText', function() {
con.$validate();
});
}
}
});
angularjs表单注册--两次密码验证的更多相关文章
- AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- AngularJS 表单
AngularJS 表单是输入控件的集合. HTML控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 H ...
- AngularJs(Part 9)--AngularJS 表单
AngularJS 表单 AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...
- 【14】AngularJS 表单
AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 ...
- ajax+FormData+javascript 实现无刷新表单注册
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery中防止表单提交两次的方法
遇到过表单提交两次的情况,做个记录: 解决场景:首先是表单验证,其次是防止多次提交表单: jQuery中插件:validate_submitHandler_plugin,具体的可以使用关键字搜索: 使 ...
- form表单注册——HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第3节 maven标准目录结构和常用命令_07maven常用命令
以给的hellowordl的的代码为例. src/main/java下,这是主业务逻辑代码 里面的内容只有一个jsp的跳转 测试包下: 里面很简单的就输出了一句话 复制项目的目录 先cd进入复制的这个 ...
- 获取当前操作的IFrame 对象的方法
分两种情况:第一种:获取iframe对象的JS函数在父页面上,如下 function getIframeByElement(element){ var iframe; $("iframe&q ...
- unlink- ctf-stkof
stkof 程序下载:https://pan.baidu.com/s/1_dcm8OFjhKbKYWa3WBtAiQ 提取码:pkyb unlink 基础操作 # define unlink #def ...
- charles抓包教程
百度搜索下载charles 默认安装即可完成 1.双击charles.exe启动,我的是4.2.7版本.最好下载原版的不要去破解中文,会有不兼容 1.搜索该软件许可证书并输入即可长期使用 2.设置代理 ...
- Scratch少儿编程系列:(七)太阳系八大行星的运转
一.程序说明 本程序用来模拟太阳系八大行星的运转过程. 二.程序流程图 为了更直观的描述上述过程,采用流程图的方式将猜数字的过程进行描述. 还在制作中... 三.制作过程 1. 场景和角色的选择 场景 ...
- 虚拟机三种网络模式及Xshell与Centos7虚拟机连接
一.虚拟机的三种网络模式 1.桥接模式 a.该模式下的虚拟机可以上外网 b. 局域网之内的主机可以访问该虚拟机(做共享服务器使用) c. 该虚拟机可以和宿主机进行通信 d. 同一台主机相同模式下的虚拟 ...
- STM32 USB开发(三) 基于F105RBT6核心板开发的自定义HID收发(FS)
硬件设计 该核心板的USB插口有两个,一个是用于USB Slave的,可以用来做HID设备,把模拟STM32模拟为U盘等:另一个是USB Host设备,可以对插上的U盘的数据进行读写. 图中J2是Mi ...
- RHEL 无图形界面安装oracle 11gr2
RHEL7.3 无图形界面安装oracle 11gr2 使用纯命令安装方式.提供RHEL全量系统镜像. 1.oracle官方下载地址:https://www.oracle.com/techne ...
- Linux yum 命令篇
yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动下载RPM包 ...
- 洛谷 P1484 种树(优先队列,贪心,链表)
传送门 解题思路 第一眼的贪心策略:每次都选最大的. 但是——不正确! 因为选了第i个树,第i-1和i-1棵树就不能选了.所以,要有一个反悔操作. 选了第i个后,我们就把a[i]的值更新为a[l[i] ...