关闭

Angular form表单失去焦点校验

标签: 表单手动校验
586人阅读 评论(0) 收藏 举报

之前做了一个AngualrJs form表单自动校验,同事说用户体验很差,一输入就是错误,都不想注册了。。几番查资料修改后 。。。之前的代码就不看了,直接看修改后的---->



<!DOCTYPE html>
<html lang="en" ng-app="findPassword">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <style>
        input{
            text-indent: 2em;
            border:none;
            outline: none;
        }
        .form-control-feedback{
            left: 0;
        }
        .text-error{
            color: #ff7e7e;
        }
        .submit{
            text-indent:0;
        }
        #findPassword{
            display: block;
        }
    </style>
    <script src="js/lib/jQuery-2.2.0.min.js"></script>
    <script src="js/lib/md5-min.js"></script>
    <script src="js/lib/angular.js"></script>
</head>
<body ng-controller="appCtrl">
<div class="modal" id="findPassword"  role="dialog" aria-labelledby="findPassword">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>重设密码</h3>
            </div>
            <div class="modal-body">
                <form  name="findPasswords" ng-submit="formSubmit(!findPasswords.password.$error.passwords && !findPasswords.passwordAgain.$error.pwmatch)" novalidate>
                    <div class="form-group">
                        <span ng-show="findPasswords.password.$error.passwords" class="text-error">
                            密码格式不正确
                        </span>
                        <span ng-show="findPasswords.passwordAgain.$error.pwmatch && !findPasswords.password.$error.passwords" class="text-error">
                             两次密码输入不一致
                        </span>
                    </div>
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        <input type="password" class="form-control" name="password" id="userPassword" ng-model="user.password" placeholder="6-16个字符(英文字母或数字,区分大小写)" check-email-on-blur required />
                    </div>
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        <input type="password" class="form-control" name="passwordAgain" ng-model="user.passwordAgain" pw-check="userPassword" placeholder="再次输入新密码" required/>
                    </div>
                    <div class="form-group">
                        <input type="submit" ng-click="allowValidation()" class="form-control btn btn-primary submit"  value="注册"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    (function () {
        'use strict';
        var app = angular.module('findPassword',[]);
        app.controller('appCtrl',['$scope', function ($scope) {
            $scope.user = {};
		
            $scope.formSubmit = function (isValid) {

                if(!isValid){
		//判断是否有错,如果有错,不执行
return false; } else{ console.log( $scope.user); } }; $scope.allowValidation = function () { $scope.$broadcast('kickOffValidations'); }; }]); app.directive('pwCheck', [function () {
		//校验前后密码是否一致
            return {
                restrict: 'A',
                require: "ngModel",
                link: function (scope, elm, attr, ctrl) {
                    if (attr.type === 'radio' || attr.type === 'checkbox') return;
                    elm.unbind('input').unbind('keydown').unbind('change');
                    elm.bind('blur', function () {
                        scope.$apply(dovalidation);
                    });
                    scope.$on('kickOffValidations', dovalidation);
                    function dovalidation(){
                        var firstPassword = '#' + attr.pwCheck;
                        if(elm.val() === $(firstPassword).val()){
                            ctrl.$setValidity('pwmatch', true);
                        }else{
                            ctrl.$setValidity('pwmatch', false);
                        }
                    }
                }
            }
        }]);

        app.directive('checkEmailOnBlur', function(){
		//校验密码格式
            var Password_REGX = /^\d{9,16}$|^(?!\d+$)[0-9A-z]{6,16}$/;
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, elm, attr, ctrl) {
                    if (attr.type === 'radio' || attr.type === 'checkbox') return;
                    elm.unbind('input').unbind('keydown').unbind('change');
                    elm.bind('blur', function () {
                        scope.$apply(dovalidation);
                    });
                    scope.$on('kickOffValidations', dovalidation);
                    function dovalidation() {
                        if (Password_REGX.test(elm.val())) {
                            ctrl.$setValidity('passwords', true);
                        } else {
                            ctrl.$setValidity('passwords', false);
                        }
                    }
                }
            };
        });
     
    })();
</script>
</html>

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

AngularJs 失去焦点事件

body {             padding-top:30px;         }   ...
  • u014788227
  • u014788227
  • 2015-10-21 16:27
  • 12845

AngularJs获取焦点与失去焦点时的表单验证

angular.module('formExample', []) .controller('FormController', ['$scope', function(...
  • itsonglin
  • itsonglin
  • 2015-08-12 10:53
  • 13718

AngularJs 失去焦点事件

body {             padding-top:30px;         }   ...
  • u014788227
  • u014788227
  • 2015-10-21 16:27
  • 12845

实现双击进入编辑,失去焦点后保存数据(Angular)

最近做一个项目,前端由Angular搭建,需要实现一个功能,就是双击进入编辑,当失去焦点的时候把数据保存。(即改变双向绑定的数据)。         先写一些简陋的HTML代码: ...
  • PigBiBiX
  • PigBiBiX
  • 2017-08-02 11:17
  • 305

Angular解决输入框由禁用状态转可用状态自动获取焦点失效问题

有时为了方便操作,我们会为输入框设置默认焦点。而且会设置输入权限,会禁止用户输入。但是当从禁止输入切换为可输入的时候,输入框却不能设置焦点了。原因的话,我看了一下,估计是当我们改变输入框绑定的值得时候...
  • u014291497
  • u014291497
  • 2016-10-01 20:23
  • 1898

AngularJS 学习笔记(表单校验篇)

作为一个伪前端javaer,Bootstrap让我不用再为表示层
  • cackling
  • cackling
  • 2014-09-20 16:37
  • 1877

表单验证用onblur(失去焦点事件)实现

function check(name,reg,spanId,okInfo,errorInfo){ var flag; var val = document.getElementsBy...
  • qq_17632417
  • qq_17632417
  • 2015-07-15 00:21
  • 6981

输入框失去焦点时对输入信息进行JS验证

以前写的JS验证是在用户输入信息完毕后点击提交时才对输入的信息进行JS验证。 当输入框失去焦点时即对输入框中的信息进行JS验证,及时有效的反馈出验证信息,使得项目具有更良好的用户体验。 下面以一个...
  • yellowisland
  • yellowisland
  • 2013-03-08 10:02
  • 6513

angularjs的form手动验证

当用户从前端输入信息之后,给用户直接的视觉反馈是非常重要的。表单验证不仅提供了视觉上的反馈,而且还能保证用户输入的正确性,从前端为后台提供尽可能多的保护。 以下记录一下,在我工作中使用的一些form...
  • qingqingdezou_lei
  • qingqingdezou_lei
  • 2016-12-14 21:20
  • 445

angularJs -- 简单表单验证

客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。 在AngularJS中,有许多表单验证指令。在这...
  • Mchange
  • Mchange
  • 2013-11-25 16:18
  • 8226
    个人资料
    • 访问:3441次
    • 积分:179
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类