HTML5, cách buộc xác thực mẫu đầu vào về thay đổi giá trị?

Question

Tôi đang cố gắng tìm hiểu HTML5 và gặp phải những điều sau đây. Tôi muốn sử dụng từ khóa đầu vào pattern để xác thực đầu vào khi người dùng nhập nó (ví dụ: xác thực sau khi nhấn tab hoặc thay đổi tiêu điểm từ hộp nhập).

Tôi đã thử những điều sau đây:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" onchange="this.variable.validate()" /> </li> 

Và cũng như:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" /> </li> 

tôi đã lên mã cho

onchange="this.variable.validate()" 

Làm thế nào để kích hoạt các xác nhận về sự thay đổi giá trị? Tôi chỉ có thể thực hiện điều này onSubmit.

Answer 1

Bạn đã xem xét chức năng 'onkey' của javascript chưa?

onkeyup có thể là trang bạn đang tìm kiếm nếu bạn muốn một cái gì đó khi người dùng nhập.

Ngoài ra, onchange xảy ra khi trường mất tiêu điểm trong khi onkeyup được kích hoạt khi người dùng nhập. Phụ thuộc vào bạn cần.

Bạn nhiều muốn thử một cái gì đó như thế này:

onchange = variable.validate(this.value)

Answer 2

Bạn nên sử dụng KeyUp, tập trung và chức năng làm mờ để thực hiện nhu cầu của bạn. Ví dụ:

bạn có trường nhập mật khẩu:

<input id="pswd" type="password" required name="pswd" />

Trong Mã JavaScript:

$('input[type=password]').keyup(function() { 
// keyup event code here with validation rules }); 

$('input[type=password]').focus(function() { 
// focus code here to show message which contains rules for input field }); 

$('input[type=password]').blur(function() { 
// blur code here }); 

Answer 3

_{Disclaimer:
Tất cả tôi sắp nói ở đây làm việc cho tất cả các trình duyệt hiện đại. Thuật ngữ "trình duyệt hiện đại" trong ngữ cảnh này loại trừ IE9 và trước đó. Ngoài ra, Safari cho Windows chỉ hỗ trợ một phần.}

Nếu tất cả bạn cần là một chỉ số phong cách, bạn có thể sử dụng CSS tinh khiết cho việc này:

input[pattern]:invalid{ 
    color:red; 
} 

Khi sử dụng mô hình, xác nhận onsubmit được thực hiện tự động bởi trình duyệt (không hoạt động trong Safari cho Các cửa sổ).

Answer 4

Nếu bạn muốn sử dụng jQuery để backport các chức năng mô hình để trình duyệt cũ như IE8, bạn có thể làm một cái gì đó như:

// Jquery Function to Validate Patterns on Input Objects 
(function($){ 
    $.fn.validatePattern = function(search) { 
     // Get the current element's siblings 
     var pattern = this.attr('pattern'); 
     var value = this.val(); 

     return !(pattern&&(value.length>0)&&!value.match(new RegExp('^'+pattern+'$'))); 
    }; 
})(jQuery); 

$(document).ready(function() { 
    // Bind pattern checking (invalid) to on change 
    $(':input').change(function() { 
     if (!$(this).validatePattern()) { 
      $(this).addClass('invalidPattern'); 
     } 
    }); 
    // Bind pattern valid to keyUp 
    $(':input').keyUp(function() { 
     if ($(this).validatePattern()) { 
      $(this).removeClass('invalidPattern'); 
     } 
    }); 
}); 

này sẽ thêm invalidPattern lớp các đối tượng đầu vào trong đó có một mô hình và làm không phù hợp với nó. Bạn cũng có thể muốn thêm kiểm tra cho yêu cầu, vv và trên gửi kiểm tra cho các hình thức để ngăn chặn trình nếu mẫu không xác nhận. Những gì tôi đưa ra ở trên là một kịch bản nhanh, nhẹ để chỉ xác nhận mẫu.

Đối với một shim chức năng đầy đủ hơn, nhìn vào http://adodson.com/jquery.form.js/

Mã xác nhận mô hình là từ dự án đó.

Answer 5

hei ~ Tôi biết những gì bạn muốn ~~ Sử dụng này reportValidity()

$('#test').on('input',function (e) { 
    e.target.setCustomValidity('') 
if ($(this).val()>3) { 
    console.log('o~~~~error'); 
    this.setCustomValidity('123') 
    // this.checkValidity() 
    this.reportValidity(); 
} 

sau đó khi đầu vào #test lớn hơn 3 có một lời khuyên auto pop

$('#test').on('input', function(e) { 
 
    this.setCustomValidity('') 
 
    if ($(this).val() > 3) { 
 
     this.setCustomValidity('wooo~~~~') 
 
    } 
 
    // e.target.checkValidity() 
 
    this.reportValidity(); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input autofocus id='test' type="text" min="1" pattern="[0-9]+" required> 
 
<!-- <button type="submit">submit</button> --> 
 
</form>

https://html.spec.whatwg.org/#dom-cva-reportvalidity

Answer 6

Mã jQuery sau đây sẽ bắt buộc xác thực mỗi lần đầu vào bị thay đổi.

Nó chặn oninput event trên các yếu tố <input...>. Nếu giá trị không hợp lệ sau sự kiện, thay đổi sẽ được hoàn tác và giá trị ban đầu được khôi phục. Nó cũng xử lý các tình huống mà giá trị không hợp lệ đã được dán vào trường.

Các cửa hàng data() function và truy xuất bất kỳ dữ liệu nào đến phần tử bằng cách sử dụng HTML5 data-attribute. Hàm lưu trữ giá trị ban đầu vào phần tử data-last-valid.

<script lang="text/javascript"> 
    // First "input" means event type `oninput`, second "input" is the CSS selector. 
    // So read as "for all <input ...> elements set the event handler 
    // for the "oninput" event to the function... 
    $(document).on("input", "input", function (event) { 
     if (this.checkValidity()) { 
      // Store the current valid value for future use 
      $(this).data('last-valid', this.value); 
     } 
     else { 
      // Undo the change using the stored last valid value 
      this.value = $(this).data('last-valid') || ""; 
     } 
    }); 
</script>