tùy chỉnh chỉ thị để hạn chế người dùng nhập các ký tự đặc biệt: angs Js

Tôi đang tìm hiểu chi tiết về chỉ thị angularJs. Hiện tại tôi đang sử dụng nó để hạn chế người dùng không nhập các ký tự đặc biệt.tùy chỉnh chỉ thị để hạn chế người dùng nhập các ký tự đặc biệt: angs Js

đây là mã

HTML

<input type="text" no-special-char ng-model="vm.customTag" class="form-control" value="" />

AngularJS Chỉ

app.directive('noSpecialChar', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, element, attrs, modelCtrl) { 
      modelCtrl.$parsers.push(function (inputValue) { 
       if (inputValue == null) 
        return '' 
       cleanInputValue = inputValue.replace(/[^\w\s]/gi, ''); 
       if (cleanInputValue != inputValue) { 
        modelCtrl.$setViewValue(cleanInputValue); 
        modelCtrl.$render(); 
       } 
       return cleanInputValue; 
      }); 
     } 
    } 
});

đây là hai điều mà tôi muốn

(1) chúng tôi er có thể nhập trừ/dấu gạch ngang '-' hiện không xảy ra, làm cách nào tôi có thể thay đổi /[^\w\s]/gi của mình cho phép người dùng nhập dấu (- dấu gạch ngang/dấu trừ).

(2) Chức năng trên chỉ hạn chế người dùng không nhập bất kỳ ký tự đặc biệt nào, nhưng khi người dùng nhập một ký tự đặc biệt tôi muốn hiển thị cảnh báo màu đỏ cũng như không được phép "" ký tự đặc biệt "" làm việc đó đi ??

Bất kỳ trợ giúp nào được đánh giá cao !!!

Cảm ơn

Nguồn

2016-03-30 shreyansh

nhưng mã thay thế sẽ xóa tất cả các ký tự đặc biệt .. giải thích về ký tự nằm trong ký tự đặc biệt. –

Tôi không muốn người dùng nhập ~! @ # $%^& *() {} []?/+ =, * ', Nó phải là số alpha + trừ (-) + _ (dấu gạch dưới) được cho phép – shreyansh

Có một cái nhìn vào xác nhận hình thức góc cạnh. Tôi khuyên bạn nên đánh dấu đầu vào là không hợp lệ và cho phép xử lý xác thực biểu mẫu hiển thị lỗi. Ngoài ra tôi sẽ không khuyên bạn nên thay đổi những gì người sử dụng đầu vào, nó là tốt hơn để nói với họ rằng họ đang làm một cái gì đó sai hơn là thay đổi kỳ diệu những gì họ làm. –

Câu hỏi # 1

Hiện nay, RegEx của bạn là chọn tất cả các ký tự không ([^) một nhân vật từ (\w) hoặc khoảng trắng (\s). Để bao gồm -, cần phải bao gồm trong danh sách các ký tự để không được thay thế.

Thử RegEx sau:

/[^\w\s-]/gi

Để loại trừ bất kỳ ký tự khác không bị loại bỏ, chỉ cần thêm chúng sau khi -

Live Demo on RegExr

Câu hỏi # 2

Bạn cần nghe sự kiện keypress trên biểu mẫu, để xem mỗi lần nội dung thay đổi. Sau đó, bạn có thể sử dụng .match() để xem có bất kỳ ký tự đặc biệt nào tồn tại hay không. Nếu có, nó sẽ trả về một chuỗi là truthy, nếu không nó sẽ trả về false.

Bạn có thể kiểm tra kết quả của số .match() trong câu lệnh if và nếu ký tự đặc biệt được khớp, hãy thêm thông điệp của bạn.

if (inputValue.match(/[^\w\s]/gi)) { 
    // Add Alert Here! 
}

Hoặc, bên trong if (cleanInputValue != inputValue), bạn có thể thêm mã để tạo cảnh báo. Câu hỏi if của bạn về cơ bản cung cấp cho bạn kết quả tương tự như phương pháp .match().Nó sẽ phát hiện liệu chuỗi đã bị thay đổi do .replace() và chạy mã bên nếu nó có

Nguồn

2016-03-30 09:17:36 Druzion

đó là những gì tôi đang tìm Câu hỏi 2, làm thế nào tôi có thể thêm cảnh báo (cảnh báo bootstrap) bên trong chỉ thị, vì vậy mà ngay cả khi tôi có 100 hộp văn bản tôi có thể tái sử dụng nó chỉ bằng cách gắn tên của chỉ thị như một thuộc tính vào hộp đầu vào – shreyansh

@shreyansh Mmmm .... Tôi không chắc chắn làm thế nào để làm điều đó tôi sợ. – Druzion

Edited hơn nữa để bình luận:

này làm những gì bạn mô tả, không phải trong một cách đặc biệt "góc" - nhưng đạt được kết quả mong muốn được mô tả của bạn.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ns.test"> 
<head> 
    <title>Test</title> 
    <!-- http://stackoverflow.com/questions/36303590/customizing-directive-to-restrict-the-user-to-input-special-characters-angular --> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 

    <style> 
     .input { 
      padding: 20px; 
      margin: 50px; 
     } 

      .input input { 
       border: solid 1px black; 
       font-family: Tahoma; 
       font-size: larger; 
       padding: 5px; 
      } 

     .err { 
      color: red; 
      padding: 5px; 
      margin: 10px; 
      font-family: Tahoma; 
      font-size: larger; 
      display:inline; 
     } 
    </style> 

    <script type="text/javascript"> 

     var app = angular.module('ns.test', []); 

     app.controller('testController', function ($scope) { 
      $scope.item = 'item1'; 
      $scope.item2 = 'item2'; 
      $scope.item3 = 'item3'; 
      $('input:first').focus(); 
     }); 

     var noSpecialChar = function() { 
      return { 
       restrict: 'A', 
       require: '?ngModel', 
       link: function (scope, elm, attr, modelCtrl) { 
        if (!modelCtrl) return; 

        modelCtrl.$parsers.push(function (inputValue) { 
         if (inputValue == null) 
          return '' 

         var parent = $(elm).parent(); 

         cleanInputValue = inputValue.replace(/[^a-z0-9-_]+/gi, ''); 
         if (cleanInputValue != inputValue) { 
          if (parent.find(".err").length == 0) 
           parent.append("<div class=\"err\">Invalid Characters</div>"); // change the class here to your bootstrap alert classes 
         } else 
          parent.find(".err").remove(); 

         return cleanInputValue; 
        }); 
       } 
      }; 
     }; 

     app.directive('noSpecialChar', noSpecialChar); 

    </script> 
</head> 
<body data-ng-controller="testController"> 
    <form name="userForm" novalidate> 
     <div class="input"> 
      <input type="text" data-no-special-char data-ng-model="item" /> 
     </div> 
     <div class="input"> 
      <input type="text" data-no-special-char data-ng-model="item2" /> 
     </div> 
     <div class="input"> 
      <input type="text" data-no-special-char data-ng-model="item3" /> 
     </div> 
    </form> 
</body> 
</html>

Nguồn

2016-03-30 09:44:41 Nathan

Tôi đánh giá cao câu trả lời của bạn nhưng tôi không muốn sử dụng ng-pattern, bởi vì xem xét tôi có 100 hộp văn bản trong ứng dụng của tôi ở 2 địa điểm khác nhau, Một lần nữa tôi phải thêm công cụ html này vào hộp văn bản mà tôi không muốn, những gì tôi tìm kiếm là tôi muốn có hộp cảnh báo màu đỏ hiển thị lỗi được thực hiện bên trong chỉ thị – shreyansh

Tôi đang tìm một chỉ thị tùy chỉnh ở đó tôi có thể thêm tên chỉ thị này làm thuộc tính cho số hộp văn bản. – shreyansh

@shreyansh được cập nhật - hãy cho tôi biết nếu đó là những gì bạn đang theo dõi. – Nathan

tùy chỉnh chỉ thị để hạn chế người dùng nhập các ký tự đặc biệt: angs Js

Trả lời

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