js表单密码的设置 正是区分两种方法的关键,仅供借鉴!
angularjs提供了表单验证,但是验证的过程交互体验很不好js表单密码的设置,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴。
一,点击提交验证
<pre style="font-family:Consolas; font-size:13.2pt; background-color:rgb(43,43,43)">
密码
重复密码
密码不一致
确认
取消
e>
当用户试图提交表单时js表单密码的设置,你可以在作用域中捕获到一个submitted值,然后对表单内容进行验证并显示错误信息。
JS代码
<pre style="font-family:Consolas; font-size:13.2pt; background-color:rgb(43,43,43)">$scope.submitted = false;
$scope.resetPwd = function(){
console.log(666);
**if**($scope.reset_pwd.$valid && $scope.mycompwd == $scope.resetmycompwd){
console.log('重置成功,进行其他操作');</pre>
<pre style="background-color:#2b2b2b; color:#a9b7c6; font-family:'Consolas'; font-size:13.2pt"> }else{
$scope.reset_pwd.submitted = **true**;
}
re>
亲测可用。
第二种失去焦点验证
<pre style="font-family:Consolas; font-size:13.2pt; background-color:rgb(43,43,43)">
密  码
重复密码
密码不一致
确认
取消
e>
JS代码
<pre style="background-color:#2b2b2b; color:#a9b7c6; font-family:'Consolas'; font-size:13.2pt">app.directive('ngFocus',[function(){
**var **focusClass = 'ng-focused';
**return**{
restrict:'AE',
require:'ngModel',
link:**function**(scope,element,attrs,ctrl){
ctrl.$focused = **false**;
element.bind('focus',**function**(e){
element.addClass(focusClass);
scope.$apply(**function**(){
ctrl.$focused = **true**;
});
element.bind('blur',**function**(e){
element.removeClass(focusClass);
scope.$apply(**function**(){
ctrl.$focused = **false**;
});
});
})
}
};
</pre>
/
注意HTML标红的地方。正是区分两种方法的关键。欢迎高手一起探讨!
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
酷小呵
4天前
不错,用上了