angularjs表单注册--两次密码验证
来源:互联网 发布:清除数据英文 编辑:程序博客网 时间:2024/06/05 04:03
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(); }); } } });
0 0
- angularjs表单注册--两次密码验证
- AngularJS 注册表单验证
- angularjs表单验证,包括密码长度及两次密码输入是否一致
- AngularJS验证两次密码是否相同
- easyUI验证表单两次密码是否相同
- Angularjs 表单验证3-密码、确认密码处理
- 如何实现表单提交时,验证两次密码是否一致
- jquery验证两次密码是否一致并阻止表单提交
- AngularJs表单验证+仿某Q注册界面
- angularJs -- 简单表单验证
- 表单验证<AngularJs>
- AngularJS表单验证
- AngularJs表单验证
- AngularJS 的表单验证
- AngularJS 的表单验证
- AngularJS 表单验证
- 表单验证<AngularJs>
- angularjs自定义表单验证
- QT cmd强制删除文件
- Linux操作(1) 环境变量设置
- Python 命令行参数和getopt模块详解
- SSH登录异常
- 深度学习之caffe 网络定义和相关操作
- angularjs表单注册--两次密码验证
- chrome浏览器最牛插件之一 Vimium
- 正益工场李红格:区域城市的移动双创,路在何方?
- Java ArrayList的自定义排序
- Python基础语法
- No module named yum 解决办法
- PHP命名空间(Namespace)的使用详解
- mysql root用户 远程登录其它机器,看不到数据库
- WSTMall论坛