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表单注册--两次密码验证的更多相关文章

  1. AngularJS表单验证,手动验证或自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...

  2. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  3. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  4. AngularJS 表单

    AngularJS 表单是输入控件的集合. HTML控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 H ...

  5. AngularJs(Part 9)--AngularJS 表单

    AngularJS 表单     AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...

  6. 【14】AngularJS 表单

    AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 ...

  7. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jQuery中防止表单提交两次的方法

    遇到过表单提交两次的情况,做个记录: 解决场景:首先是表单验证,其次是防止多次提交表单: jQuery中插件:validate_submitHandler_plugin,具体的可以使用关键字搜索: 使 ...

  9. form表单注册——HTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 中国MOOC_零基础学Java语言_第5周 数组_1多项式加法

    第5周编程题 查看帮助 返回   第5周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...

  2. elasticsearch7.0安装及配置优化

    简单讲ES开箱即用,不用任何配置也能玩转搜索引擎:以下内容是根据易企秀线上实际使用场景进行的安装和配置,支持冷热数据分离 1.安装 Linux 环境下载安装包 curl -L -O https://a ...

  3. TCP的三次握手过程

    TCP::传输控制协议(Transmission Control Protocol )     是一种面相连接的.可靠的.基于字节流的 传输层通信协议. TCP是一种面相连接的协议.其显著的特点就是在 ...

  4. Excel表格数据导入MySQL数据库

    有时候项目需要将存在表格中的批量数据导入数据库,最近自己正好碰到了,总结一下: 1.将excel表格另存为.csv格式文件,excel本身的.xlsx格式导入时可能会报错,为了避免不必要的格式错误,直 ...

  5. 【HANA系列】SAP HANA SQL获取本周的周一

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取本周 ...

  6. Discrete Mathematics and Its Applications | 1 CHAPTER The Foundations: Logic and Proofs | 1.1 Propositional Logic

    propositional variables (or statement variables), letters used for propositional variables are p, q, ...

  7. Visdom可视化

    Visdom是基于Pytorch的可视化工具 安装方式: pip install visdom 因为Visdom本质上是一个Web服务器,把数据渲染到网页上,因此首先需要运行这个 服务器,如下: py ...

  8. input标签内容改变时触发事件

    1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发: onpropertychange事件是实时触发,每增加 ...

  9. ajax异步加载分页评论带点赞功能

    <script type="text/javascript" src="__ROOT__/Index/Tpl/Public/js/jquery.js"&g ...

  10. luogu P1224 [NOI2013]向量内积

    传送门 挺有意思的一道题 暴力60就是枚举每个向量暴力check,随机选向量就能多骗一些分 然后两个向量内积要模\(k\)为\(0\),那么如果全部不为\(0\)就不合法.先考虑\(k=2\),对于向 ...