làm thế nào để xác nhận hình thức trong ionic sử dụng góc js

Tôi đang cố gắng sử dụng khung ionic với angular.I muốn làm xác nhận của hình thức của tôi trên nút click.Mean Tôi cần phải xác nhận tất cả các lĩnh vực trên nút bấm. Tất cả các lĩnh vực được yêu cầu .. Tôi cần hiển thị thông báo lỗi nếu một trường không đáp ứng yêu cầu. Giống như mật khẩu tối thiểu nhân vật 5 và tối đa 10. Và xác nhận email.làm thế nào để xác nhận hình thức trong ionic sử dụng góc js

bạn có thể xin vui lòng cho m làm thế nào tôi sẽ làm validation.Here là tôi code

<html ng-app=""> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Sign-in, Then Tabs Example</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 

    </head> 

    <body> 

    <ion-view title="Page"> 
    <ion-content padding="true" class="has-header has-footer"> 
     <form> 
      <label class="item item-input"> 
       <span class="input-label">name</span> 
       <input type="text" placeholder="name"> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">email</span> 
       <input type="email" placeholder="email"> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">password</span> 
       <input type="password" placeholder="password"> 
      </label> 
     </form> 
     <button class="button button-balanced button-block">check validation</button> 
    </ion-content> 
</ion-view> 

    </body> 
</html>

Nguồn

2015-03-18 Shruti

tôi có thể bị trễ nhưng đây là những gì bạn có thể làm.

Trước hết, bạn cần xác định biểu mẫu (như bạn đã làm) bằng cách sử dụng chỉ thị ng-submit để biểu mẫu của bạn có thể được POST tới bộ điều khiển.

<body ng-app="myApp"> 
    <ion-view title="Page"> 
    <ion-content padding="true" class="has-header has-footer"> 
     <form name="loginForm" ng-submit="$scope.login($scope.user);" novalidate> 
      <label class="item item-input"> 
       <span class="input-label">name</span> 
       <input type="text" placeholder="name" ng-model="$scope.user.username" form-validate-after> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">email</span> 
       <input type="email" placeholder="email" ng-model="$scope.user.email" form-validate-after> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">password</span> 
       <input type="password" placeholder="password" ng-model="$scope.user.password" form-validate-after> 
      </label> 
     </form> 
     <button class="button button-balanced button-block">check validation</button> 
    </ion-content> 
</ion-view> 
</body>

Tôi đang chuyển mô hình đến trường nhập của mình để tôi có thể đọc chúng sau này. Tôi đã đánh dấu từng đầu vào bằng chỉ thị tùy chỉnh form-validate-after.

Đây là chỉ thị tôi đã tạo:

(function() { 

    'use strict'; 

    angular 
     .module('myApp', ['ionic']) 
     .directive('formValidateAfter', formValidateAfter); 

    function formValidateAfter() { 
     var directive = { 
      restrict: 'A', 
      require: 'ngModel', 
      link: link 
     }; 

     return directive; 

     function link(scope, element, attrs, ctrl) { 
      var validateClass = 'form-validate'; 
      ctrl.validate = false; 
      element.bind('focus', function (evt) { 
       if (ctrl.validate && ctrl.$invalid) // if we focus and the field was invalid, keep the validation 
       { 
        element.addClass(validateClass); 
        scope.$apply(function() { ctrl.validate = true; }); 
       } 
       else { 
        element.removeClass(validateClass); 
        scope.$apply(function() { ctrl.validate = false; }); 
       } 

      }).bind('blur', function (evt) { 
       element.addClass(validateClass); 
       scope.$apply(function() { ctrl.validate = true; }); 
      }); 
     } 
    } 

}());

mã này sẽ lặp qua tất cả các lĩnh vực đầu vào của bạn thêm một lớp nếu nó được đánh dấu là không hợp lệ.

Bạn cần phải xác định một css:

.form-validate.ng-invalid { 
    border: 3px solid #cc2511; 
} 
.form-validate.ng-valid { 
    border: none; 
}

đừng quên để thêm novalidate mẫu của bạn.

novalidate được sử dụng để tắt xác thực biểu mẫu gốc của trình duyệt.

Nếu bạn muốn thiết lập một lĩnh vực như bắt buộc và xác định max và min chiều dài:

<input name="password" type="password" placeholder="password" ng-model="$scope.user.password" required ng-minlength='5' ng-maxlength='10'>

Nếu bạn muốn xem mẫu này trong hành động mà bạn có thể kiểm tra xem nó here.

CẬP NHẬT

cách tiếp cận khác là để thiết lập tất cả mọi thứ trong dòng thay đổi lớp trên mỗi nhãn:

<label class="item item-input" ng-class="{ 'has-errors' : loginForm.username.$invalid && !loginForm.username.$pristine, 'no-errors' : loginForm.username.$valid}"> 
    ... 
</label>

Ở đây bạn có để cung cấp cho từng lĩnh vực một name và sử dụng ng-class chỉ thị.

Chỉ thị ngClass phép bạn tự động thiết lập các lớp CSS trên một phần tử HTML bởi databinding biểu thức đại diện mọi tầng lớp được thêm vào.

Bạn có thể thấy nó hoạt động here.

Nguồn

2015-05-06 13:35:19 LeftyX

làm thế nào để xác nhận hình thức trong ionic sử dụng góc js

Trả lời

Các vấn đề liên quan