search

Home  >  Q&A  >  body text

angular.js - Angular表单验证

本人刚开始学习angular，在表单验证这里碰到了一些问题，我的意思是想在blur的时候再让错误提示显示出来，而在focus时不显示错误信息，可是我按照书上的来打，但是不正确，有谁能帮我分析下，谢谢~

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="../css/lib/bootstrap4.css">
    <script type="text/javascript" src='../js/lib/angular.js' ></script>
    <script type="text/javascript" src='js/validation2.js'></script>
</head>
<body ng-controller="myCtrl">
    <form name='signup_form' novalidate ng-submit='signupForm()'>

            <fieldset>
                <legend>Signup</legend>
            </fieldset>

            <fieldset  class="form-group">
                <label>Your name</label>
                <input type="text" class="form-control" placeholder='Name' name='name' ng-model='signup_name' ng-minlength='3' ng-maxlength='20' required ng-focus />
                
                <p class="alert alert-danger" ng-show='signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused'>
                    <small class='error' ng-show='signup_form.name.$error.required'>Your name is required</small>
                    <small calss='error' ng-show='signup_form.name.$error.minlength'>Your name is required to be at least 3 words</small>
                    <small class='error' ng-show='signup_form.name.$error.maxlength'>Your name can't be longer than 20 words</small>
                </p>
                <pre>
                    focused:{{!signup_form.name.$focused}}
                    $dirty:{{signup_form.name.$dirty}}<br>
                    $invalid:{{signup_form.name.$invalid}}<br>
                    required:{{signup_form.name.$error.required}}<br>
                    minlength:{{signup_form.name.$error.minlength}}<br>
                    maxlength:{{signup_form.name.$error.maxlength}}
                </pre>
            </fieldset>
        </form>
</body>
</html>

js

var app = angular.module('app',[]);
app.controller('myCtrl', ['$scope','$timeout', function($scope,$timeout){
    
    
}])
app.directive('ngFocus',function(){
    // var FOCUS_CLASS = "ng-focused";
    return{
        restrict : 'A',
        require : 'ngModel',
        link : function(scope,ele,attrs,ctrl){
            ctrl.$focused = false;
            ele.bind('focus',function(ev){
                // ele.addClass(FOCUS_CLASS);
                scope.$apply(function(){
                    ctrl.$focused = true;
                });
            }).bind('blur',function(ev){
                // ele.removeClass(FOCUS_CLASS);
                scope.$apply(function(){
                    ctrl.$focused = false
                })
            })
        }
    }
})
给我你的怀抱给我你的怀抱2744 days ago547

reply all(1)I'll reply

  • 某草草

    某草草2017-05-15 17:00:38

    <input type="text" class="form-control" placeholder='Name' name='name' ng-model='signup_name' ng-minlength='3' ng-maxlength='20' required validate-on-blur />
    app.directive('validateOnBlur', function () {
  return {
      require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
        var allowTypes = ['text', 'email', 'password'];
        if (allowTypes.indexOf(attrs.type) === -1) {
          return;
        }
    
        ctrl.$focused = false;
    
        elem.bind('focus', function () {
          elem.addClass('ng-focused');
          scope.$apply(function () {
            if(!ctrl.$focused){
              ctrl.$focused = true;
            }
          });
        });
    
        elem.bind('blur', function () {
          elem.removeClass('ng-focused');
          scope.$apply(function () {
            ctrl.$setViewValue(elem.val());
            ctrl.$focused = false;
          });
        });
      }
    }
})

    reply
    0
  • Cancelreply