Vấn đề xác thực JavaScript với các ký tự quốc tế

Question

Chúng tôi sử dụng tuyệt đối validator plugin for jQuery tại đây trên Ngăn xếp ngăn xếp để thực hiện xác thực phía máy khách của đầu vào trước khi được gửi tới máy chủ.

Nó thường hoạt động tốt, tuy nhiên, điều này đã khiến chúng tôi gãi đầu.

Phương pháp validator sau được sử dụng trên hỏi hình thức/câu trả lời cho trường tên người dùng (lưu ý rằng bạn phải đăng xuất khỏi để xem lĩnh vực này trên trang web trực; nó trên mỗi /question trang và trang /ask)

$.validator.addMethod("validUserName", 
    function(value, element) { 
    return this.optional(element) || 
    /^[\w\-\s\dÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜäëïöüçÇßØøÅåÆæÞþÐð]+$/.test(value); }, 
    "Can only contain A-Z, 0-9, spaces, and hyphens."); 

Bây giờ regex này có vẻ lạ, nhưng nó khá đơn giản:

• trận đấu đầu của chuỗi (^)
• trận đấu bất kỳ trong số này ..
  • nhân vật từ (\ w)
  • dấu gạch ngang (-)
  • không gian (\ s)
  • chữ số (\ d)
  • ký tự ngôn ngữ trăng điên (àèìòù vv)
• tại phù hợp với sự kết thúc của chuỗi ($)

Có, chúng tôi chạy vào vấn đề Internationalized Regular Expressions. Định nghĩa của JavaScript về "ký tự từ" không bao gồm các ký tự quốc tế .. ở tất cả.

Đây là phần lạ: mặc dù chúng tôi đã gặp sự cố khi tự thêm tấn ký tự quốc tế hợp lệ vào regex, nó không hoạt động. Bạn không thể nhập các ký tự quốc tế vào hộp nhập liệu cho tên người dùng mà không nhận được ..

Chỉ có thể chứa A-Z, 0-9, khoảng trắng và dấu gạch ngang

.. xác nhận sự trở lại!

Rõ ràng xác thực là làm việc cho các phần khác của regex .. do đó .. những gì cung cấp?

Phần lạ khác là xác thực này hoạt động trong bảng điều khiển JavaScript của trình duyệt nhưng không phải khi được thực hiện như một phần của tiêu chuẩn * .js của chúng tôi bao gồm.

/^ [\ w- \ sÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜäëïöüçÇßØøÅåÆæÞþÐð] + $/ .test ('ÓBill de Hora') === đúng

Chúng tôi đã gặp phải một số vấn đề nhân vật quốc tế thực sự kỳ lạ trong Mã JavaScript trước đây, dẫn đến một số hack rất, rất khó chịu. Chúng tôi muốn hiểu những gì đang xảy ra ở đây và tại sao. Hãy khai sáng cho chúng tôi!

Answer 1

Tôi nghĩ rằng phương pháp xác thực email và url là một tham chiếu tốt ở đây, ví dụ: phương thức email:

email: function(value, element) { 
    return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value); 
}, 

The script to compile that regex.

Nói cách khác, thay thế danh sách tùy ý của bạn về "mặt trăng điên" nhân vật với điều này có thể giúp:

[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF] 

Về cơ bản điều này tránh được các vấn đề mã hóa ký tự bạn có ở nơi khác bằng cách thay thế các nhân vật nhu cầu mã hóa với tổng quát hơn các định nghĩa. Trong khi không nhất thiết phải dễ đọc hơn, cho đến nay nó ngắn hơn danh sách đầy đủ của bạn.

Câu hỏi mới nhất

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.