cari

Rumah  >  Soal Jawab  >  teks badan

angular.js - Pengesahan bentuk sudut

Saya baru mula belajar sudut dan menghadapi beberapa masalah dalam pengesahan borang Apa yang saya maksudkan ialah saya ingin memaparkan mesej ralat apabila mengaburkan, tetapi tidak memaparkan mesej ralat semasa memfokuskan, tetapi ia tidak betul. Bolehkah sesiapa membantu saya menganalisisnya. Terima kasih~

<!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
                })
            })
        }
    }
})
给我你的怀抱给我你的怀抱2779 hari yang lalu569

membalas semua(1)saya akan balas

  • 某草草

    某草草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;
              });
            });
          }
        }
    })

    balas
    0
  • Batalbalas