Làm cách nào để thêm trình xác thực tùy chỉnh vào đầu vào giấy?

Question

Cần thêm trình xác thực tùy chỉnh thực hiện xác thực phức tạp dựa trên giá trị của các trường khác trong html.

Đã cố gắng thêm chức năng trình xác thực tùy chỉnh làm thuộc tính cho phần tử nhập giấy nhưng sẽ không được gọi là.

<dom-module id='custom-ele'> 
      <paper-input is="iron-input" id='input_1' label='Label_1' validator='validate_1'></paper-input> 
      <paper-input is="iron-input" id='input_2' label='Label_2' validator='validate_2'></paper-input> 
      ... 
    </dom-module> 
    <script> 
    Polymer({ 

     is: 'custom-ele', 

     validate_1: function() { 
      //validation code 
     }, 

     validate_2: function() { 
      //validation code 
     } 

    }); 
    </script> 

Answer 1

Trình xác thực phải triển khai IronValidatorBehavior (xem docs). Ngoài ra, nếu bạn muốn xác thực tự động, bạn cần đặt thuộc tính auto-validate. Để đạt được mục tiêu của mình, bạn có thể tạo trình xác thực tùy chỉnh cho từng loại xác thực mà bạn muốn sử dụng. Ngoài ra, bạn có thể tạo trình xác thực tùy chỉnh chung và đặt chức năng xác thực khi khởi tạo. Đây là một ví dụ.

Polymer({ 

    is: 'custom-validator', 

    behaviors: [ 
     Polymer.IronValidatorBehavior 
    ] 
}); 

<dom-module id='validation-element'> 
    <template> 
     <custom-validator id="valid1" validator-name="validator1"></custom-validator> 
     <custom-validator id="valid2" validator-name="validator2"></custom-validator> 
     <paper-input auto-validate id='input_1' label='Label_1' validator='validator1'></paper-input> 
     <paper-input auto-validate id='input_2' label='Label_2' validator='validator2'></paper-input> 
    </template> 
</dom-module> 
<script> 

    Polymer({ 

     is: 'validation-element', 

     validate1: function(value) { 
      //validation code 
      console.log("validate1"); 
      return value.length > 3; 
     }, 

     validate2: function(value) { 
      //validation code 
      console.log("validate2"); 
      return value.length > 5; 
     }, 

     ready: function() { 
      this.$.valid1.validate = this.validate1.bind(this); 
      this.$.valid2.validate = this.validate2.bind(this); 
     } 

    }); 

</script> 

Bạn có thể tìm ví dụ làm việc trong số plunk này.

Answer 2

Ok, câu trả lời của tôi có thể không phải là "cách Polymer" nhưng nó hoạt động và có nhiều cách "theo chương trình truyền thống" hơn.

Các danh sách ngắn các ý tưởng cho giải pháp này:

1. giấy đầu vào aka nhìn lên sắt đầu vào giá trị của thuộc tính validator trong đối tượng toàn cầu sắt-meta
2. Mỗi Polymer.IronValidatorBehavior có một tên (validatorName), một loại ('validator') và một hàm validate
3. Mỗi Polymer.IronValidatorBehavior tự đăng ký trong danh sách tương ứng 'validator' trong đối tượng sắt-meta

Vì vậy, đây là một mã ngắn tôi bắt nguồn từ những điểm trên:

var validator = { 
    validatorName: 'my-custom-validator', 
    validatorType: 'validator', 
    validate:  function(value) { ...my validation code... } 
}; 
new Polymer.IronMeta({ 
    type: validator.validatorType, 
    key: validator.validatorName, 
    value: validator 
}); 

Bạn có thể đặt mã này trong bất kỳ hoặc xử lý sự kiện 'gắn' 'tạo ra'. Nhưng chạy nó trước khi bất kỳ xác nhận được thực hiện tất nhiên ...

Sau đó, bạn có thể viết

<paper-input validator="my-custom-validator"></paper-input> 

Nếu bạn kiểm tra muốn nếu validator của bạn là đăng ký với đầu vào, điều hướng xuống dom-cây trong bất kỳ công cụ dev nào và nhấn: $0.hasValidator() và $0.validator để xem liệu trình xác thực của bạn đã được đăng ký thành công với đầu vào chưa.