Xác thực nhập văn bản html khi được nhập

Question

Cách tốt nhất để xác thực nhập văn bản HTML khi nhập văn bản là gì? Tất cả những cách tôi biết làm nó có một số nhược điểm:

1. Sử dụng $.keypress bạn chỉ có thể truy cập giá trị cũ của đầu vào, không phải là người mới. Ngoài ra, một số sự kiện (như cắt/dán bằng chuột) sẽ không được phát hiện.

2. Sử dụng $.change chỉ hoạt động khi đầu vào bị mất tiêu điểm.

3. This question đề xuất giải pháp, nơi bạn sử dụng bỏ phiếu để xem các thay đổi về tài sản. Về nguyên tắc, có thể xác thực giá trị mới trong cuộc gọi lại, sau đó hoàn nguyên về giá trị cũ nếu không hợp lệ. Tuy nhiên, bên cạnh yêu cầu bỏ phiếu, tôi không chắc nó không có điều kiện chủng tộc.

4. This article đề xuất sử dụng các tính năng cụ thể của trình duyệt khi có mặt, quay lại bỏ phiếu nếu không có tính năng nào. Có vẻ như cách tiếp cận tốt nhất cho đến nay.

5. [Cập nhật] như chỉ trong các câu trả lời, $.keyup cung cấp cho truy cập vào các giá trị sau khi cập nhật. Tuy nhiên, không chỉ nó không hoạt động để cắt/dán chuột, nhưng cũng không thành công nếu bạn bấm và giữ một phím, chỉ phát hành sau khi đã nhập rất nhiều. Hoặc, nếu kết hợp keydown và keyup để lưu/khôi phục giá trị cũ, nó sẽ bị hỏng nếu người dùng nhập quá nhanh.

Không có giải pháp nào ở trên là trình duyệt chéo lỗi hoặc thực sự an toàn. Có giải pháp nào tốt hơn ở đó, sẵn sàng sử dụng hoặc đang trong quá trình sản xuất không? Dường như là một vấn đề phổ biến, tôi đã cố gắng trả lời similarquestions gần đây, không thành công và tôi cũng quan tâm đến câu trả lời.

(Đối số tốt đối với thực hành này cũng được hoan nghênh, trong trường hợp có vấn đề mới điều cần muốn)

Answer 1

Bạn có thể sử dụng input (FF) và 0.123.(tất cả những sự kiện khác) để nắm bắt tất cả các hình thức đầu vào bao gồm cả bàn phím và rmb cắt dán.

http://jsfiddle.net/dFBzW/

$('input').bind('input propertychange', function() { 
    $('#output').html($(this).val()); 
}); 

Answer 2

đây là mã

function validatephone(xxxxx) 
 
{ 
 
    var maintainplus = ''; 
 
    var numval = xxxxx.value 
 
    if (numval.charAt(0)=='+') 
 
    { 
 
    var maintainplus = ''; 
 
    } 
 
    curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\-\)\(*+_={};:'@#~,.Š\/<>\" "\?|`¬\]\[]/g,''); 
 
    xxxxx.value = maintainplus + curphonevar; 
 
    var maintainplus = ''; 
 
    xxxxx.focus; 
 
}

<input type="text" align="MIDDLE" size="30" maxlength="20" onkeyup="validatephone(this);" name="contact"/>

Answer 3

Một lập luận tốt chống lại thực hành này cũng được chào đón, trong trường hợp có những vấn đề mới mà sẽ tăng nếu xác nhận này đã được thực hiện; tuy nhiên, đó có vẻ là một điều phổ biến trong các ngôn ngữ khác, vì vậy tôi nghi ngờ đó là một điều xấu để muốn.

Nếu bằng cách "xác thực" nghĩa là "ngăn chặn các ký tự không hợp lệ được nhập", tôi nghĩ đây là một thực tiễn không tốt. Điều này gây nhầm lẫn cho người dùng, những người có thể không chú ý và có lẽ thậm chí không nhìn vào trường khi họ nhập (ví dụ:, nếu họ đang nhập tài khoản hoặc số điện thoại mà họ đang đọc từ một mảnh giấy). Giá trị thực sự được lưu/sử dụng có thể hơi khác với giá trị mà chúng nghĩ rằng chúng đã nhập.

Nếu bằng "xác thực", bạn có nghĩa là "kiểm tra giá trị hiện tại và thu hút sự chú ý của người dùng vào bất kỳ sự cố nào", vd: hiển thị lỗi bên cạnh trường hoặc thay đổi màu nền, thì không có vấn đề gì khi sử dụng kết hợp một số sự kiện bao gồm KeyUp, thay đổi, mờ, dán, bấm:

$("field selector").on("keyup change blur paste cut click", function() { ... }); 

này sẽ bắt các trường hợp bình thường nhất như các loại người dùng, và các trường hợp vào clipboard hoặc drag'n'drop bạn ít nhất biết rằng tại tồi tệ nhất trường sẽ vẫn được xác thực khi người dùng rời khỏi. (Rõ ràng là bạn không cho phép gửi cho đến khi tất cả các lỗi đã được sửa.)

Nếu bạn xử lý khóa bàn phím và bao gồm các trường hợp người dùng giữ phím, vì hầu hết các trình duyệt sẽ gửi các sự kiện kéo dài lặp lại cho điều đó.

Answer 4

Trong thế giới jQuery, việc sử dụng các trình cắm thêm cho các tác vụ xác thực này là phổ biến. Plugin có thể tương đối dễ sử dụng và mức độ phổ biến của chúng thường phản ánh ít lỗi hơn so với mã được viết từ đầu.

xác nhận đầu vào thường được chia thành các loại, bao gồm:

1) định dạng đầu vào đúng/mặt nạ Input. ví dụ, chỉ A-Z, hoặc nói, 10 chữ số.

2) Sự tồn tại nội dung trong một miền. Ví dụ: mã sân bay hoặc mã bưu điện.

Đối (1) bạn có thể sử dụng các plug-ins tương đối phổ biến:

Digital Bush's Masked Input Plugin for Jquery. Nó có nhiều lựa chọn cho không gian bao gồm chỉnh sửa, ví dụ:

từ trang web Bush kỹ thuật số:

$("#phone").mask("(999) 999-9999"); 

Các autoNumeric from decorplanit.com. Họ có một sự hỗ trợ tốt đẹp cho số, cũng như tiền tệ, làm tròn vv

chuyển thể từ trang web autoNumeric:

$('#amountPaid').autoNumeric({aSep: '.', aDec: ','}); // eg, 9.000,00 

Đối (2), bạn có thể sử dụng, ví dụ, jQuery UI's autocomplete , kết hợp với dữ liệu tài nguyên máy chủ, ở định dạng như JSON. Đây có thể yêu cầu mã tùy chỉnh để khóa đầu vào, nhưng bạn vẫn có thể tận dụng các trình cắm thêm cho chức năng cơ bản và tập trung vào logic nghiệp vụ cụ thể mà bạn đang tạo.

Một số văn bản ở trên được điều chỉnh từ hai câu trả lời trong các bài đăng khác here và here.

Answer 5

này cũng có thể hữu ích

$(".cssclass").live("input propertychange", function() { 
    //Validate goes here 
}); 

Answer 6

Chỉ cần cho một giải pháp để ngăn chặn các nhân vật nhất định, mà không JQuery ...

<input type="text" onkeypress="checkInput(event)" /> 

... 

function checkInput(e) 
{ 
    //only alpha-numeric characters 
    var ok = /[A-Za-z0-9]/.test(String.fromCharCode(e.charCode)); 
    if (!ok) 
     e.preventDefault(); 
} 

Tôi không biết điều này yêu cầu phiên bản mới của sự vật hay chỉ hoạt động trên một số trình duyệt. Hãy bình luận.

Answer 7

Bạn đã thử oninput chưa?

HTML dụ:

<input name="username" id="user_name" oninput="readvalue();"> 

javascript:

function readvalue() { 
    var name = $('#user_name').val(); 
} 

Answer 8

let that=this; 

$(this.element).find("input").keypress(function(e) { 
       let character = String.fromCharCode(e.keyCode); 

       let newValue = this.value.substring(0,this.selectionStart) + character + this.value.substring(this.selectionEnd, String(this.value).length); 


       if (!that.isFormatValid(newValue, that.getdecimalPoints())) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        return false; 
       } 

       return true; 
     }); 


     $(this.element).find("input").bind({ 
       paste: function() { 
        let _this = this; 

        setTimeout(function() { 
          let decimals = that.getdecimalPoints(); 
          if (!that.isFormatValid($(_this).val(), decimals)) {       
             $(_this).val('');       
          } 
        }, 0);                         
        } 
      });