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 ...
随机推荐
- JS中设置cookie,读取cookie,删除cookie
在开发时,碰到一个需求,需要保存一个表的信息(非隐私),希望下次打开还存在.于是想到用cookie,一番折腾完成.示例数据都是假的,打马赛克是怕泄密. 这个表取名为Data,为Array,每一行是一个 ...
- 【奇技淫巧】linux 定时任务 crontab 反弹 shell
日期:2018-11-26 13:47:34 介绍:如何使用定时任务来反弹 shell? 0x01. 基本命令 参数 -e:编辑该用户的计时器设置: -l:列出该用户的计时器设置: -r:删除该用户的 ...
- springboot上传文件过大,全局异常捕获,客户端没有返回值
最近在项目里进行全局异常处理时,上传文件超过配置大小,异常被捕获,但是接口直接报500错误,且没有任何返回值. 从后台报错日志来看,异常已经被全局异常处理捕获到了,并且也已经完成响应,为什么前端看不到 ...
- OutLook会议室预定提醒
项目组采用敏捷开发管理,每两周一个迭代.写个工具做会议室预定. 代码下载:https://download.csdn.net/download/linmilove/10547579 Appointme ...
- C++:输入n个数,通过气泡法从小到大排列顺序(掌握不熟,还请谅解)
#include<iostream> using namespace std; int main() { int n; cin>>n; int a[n]; int i,j,t; ...
- ftp搭建mysql服务器
一.将mysql放入FTP服务器中1.安装FTP yum install -y vsftpd2.准备ftp主目录 mkdir /var/ftp/mysql57/3.官网下载yum仓库的包. ...
- 如何上传大文件到github上
真的是被百度坑怕了,只适合我自己的 如果你之前安装git成功的话,右键会出现两个新选项,分别为Git Gui Here,Git Bash Here,这里我们选择Git Bash Here,进入如下界面 ...
- JS 数组的常用方法详解归纳之改变原数组方法
shift() 把数组的第一个元素从其中删除,并返回第一个元素的值, 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值.请注意,该方法不创建新数组,而是直接修改 ...
- Java中静态变量和实例变量的区别
静态变量属于类的级别,而实例变量属于对象的级别. 主要区别有两点: 1,存放位置不同 类变量随着类的加载存在于方法区中,实例变量随着对象的对象的建立存在于堆内存中. 2,生命周期不同 类变量的生命周期 ...
- 记录一次TabBar使用本地图片
方法一: 第一步:import addpng from '../../assets/img/add.png' 第二步: { title: '找折扣', image: addpng}, 即可. 方法 ...