Đôi khi các tình huống phát sinh [giả sử id người dùng, mật khẩu hoặc mã] khi người dùng phải điền vào một hoặc nhiều trường các ký tự bảng chữ cái [A-Z hoặc a-z] và số [0-9] trong biểu mẫu HTML. Bạn có thể viết tập lệnh xác thực biểu mẫu JavaScript để kiểm tra xem [các] trường bắt buộc trong biểu mẫu HTML chỉ chứa các chữ cái và số
Chức năng Javascript để kiểm tra xem đầu vào của trường chỉ chứa các chữ cái và số
// Function to check letters and numbers
function alphanumeric[inputtxt]
{
var letterNumber = /^[0-9a-zA-Z]+$/;
if[[inputtxt.value.match[letterNumber]]
{
return true;
}
else
{
alert["message"];
return false;
}
}
Để có được một chuỗi chỉ chứa các chữ cái và số [i. e. a-z, A-Z hoặc 0-9], chúng tôi sử dụng biểu thức chính quy /^[0-9a-zA-Z]+$/ chỉ cho phép các chữ cái và số. Tiếp theo, phương thức match[] của đối tượng chuỗi được sử dụng để khớp biểu thức chính quy đã nói với giá trị đầu vào. Đây là tài liệu web đầy đủ. +
Sơ đồ
Mã HTML
JavaScript form validation - checking all letters and numbers
Enter your Registration Number and Submit
- *Enter numbers and alphabets only.
-
-
mã Javascript
function alphanumeric[inputtxt]
{
var letters = /^[0-9a-zA-Z]+$/;
if[inputtxt.value.match[letters]]
{
alert['Your registration number have accepted : you can try another'];
document.form1.text1.focus[];
return true;
}
else
{
alert['Please input alphanumeric characters only'];
return false;
}
}
Mã CSS
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
Xem ví dụ trên trình duyệt
Thực hành ví dụ trực tuyến
Xem Bút chữ-số-trường-1 của w3resource [@w3resource] trên CodePen
file_download Tải xuống mã xác thực từ đây
Xác thực JavaScript khác
- Kiểm tra không trống
- Kiểm tra tất cả các chữ cái
- Kiểm tra tất cả các số
- Kiểm tra số nổi
- Kiểm tra chữ và số
- Kiểm tra độ dài chuỗi
- Xác thực email
- Xác thực ngày
- Mẫu đơn đăng ký
- Không có điện thoại. Thẩm định
- thẻ tín dụng số. Thẩm định
- Xác thực mật khẩu
- Xác thực địa chỉ IP
Trước. JavaScript. Xác thực biểu mẫu HTML - kiểm tra số dấu phẩy động
Tiếp theo. JavaScript. Biểu mẫu HTML - giới hạn độ dài
Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource
JavaScript. Lời khuyên trong ngày
Nhận xét mã của bạn thường xuyên
Nhận xét là một cách tuyệt vời để tóm tắt mục đích của một đoạn mã, tiết kiệm thời gian cho các nhà phát triển đồng nghiệp của bạn để tự xác định mục đích đó. Nó cũng cho phép họ phát hiện ra những lỗi có thể xảy ra nếu mã không hoàn thành nhiệm vụ mà nó được nhận xét là hoàn thành. Nói chung, tốt nhất là để lại một nhận xét về mọi chức năng. Nếu bạn không chắc liệu bạn có nên để lại nhận xét hay không, hãy cứ làm điều đó. Nó luôn có thể bị xóa sau nếu nó quá lộn xộn
Tuần trước David Walsh đã đăng về việc xác thực các giá trị số và chữ số bằng PHP trên blog tuyệt vời của anh ấy. Tôi đã đăng nhận xét của riêng mình về bài đăng cụ thể của anh ấy nhưng chúng không bao giờ xuất hiện nên tôi quyết định đăng phản hồi tốt hơn tại đây
Điểm quan trọng trong bài đăng của David là anh ấy cần có khả năng xác thực giữa việc tìm kiếm một giá trị số [có thể là số dấu phẩy động và do đó chứa dấu thập phân] và liệu một số chỉ chứa các chữ số
Giải pháp của anh ấy là thế này
/* numeric, decimal passes */
function validate_numeric[$variable]
{
return is_numeric[$variable];
}
/* digits only, no dots */
function is_digits[$element]
{
return !preg_match ["/[^0-9]/", $element];
}
Như tôi đã lưu ý trong nhận xét của mình [không được xuất bản], tôi không chắc tại sao bạn lại bọc is_numeric[] vào hàm validate_numeric[] của anh ấy khi tất cả những gì nó làm là gọi is_numeric[]. Tại sao không chỉ gọi is_numeric[] thay thế?
Mặt khác, hàm is_digits[] thực sự khá tốt. Ban đầu tôi nghĩ có thể có một số vấn đề với nó nhưng nó hoạt động tốt nhưng có một giải pháp thay thế đơn giản hơn
is_integer – không tốt
Trong nhận xét của mình, tôi đã gợi ý rằng anh ấy có thể sử dụng hàm is_integer[] miễn là giá trị được chấp nhận nằm trong phạm vi kiểu số nguyên và các giá trị dương và âm đều được chấp nhận. Tất nhiên, giá trị chỉ có chữ số có thể không nằm trong phạm vi số nguyên, ví dụ: is_integer[12345678901234567890] sẽ trả về false nhưng chỉ chứa số
Vấn đề với giả định ban đầu của tôi là trong dữ liệu PHP được gửi từ biểu mẫu *does* chỉ chứa các chữ số và *is* trong phạm vi số nguyên sẽ vẫn trả về false từ is_integer[] vì nó sẽ được coi là một chuỗi. Ví dụ
Và sau đó làm điều này khi biểu mẫu được gửi
echo [int]is_integer[[int]$_POST['foo']];
sẽ in 0, nghĩa là sai. D'oh. Ngoài ra, một số nguyên có thể chứa - nếu nó là một giá trị âm thì -123 sẽ trả về true mặc dù nó chứa nhiều hơn chỉ các chữ số
ctype_digit – không tốt hơn nhiều
Một giải pháp thay thế khác là hàm ctype_digit[] giúp tiết kiệm việc phải loay hoay với các biểu thức thông thường. ctype_digit kiểm tra xem tất cả các ký tự trong giá trị được truyền vào có phải là số không. Chỉ các số từ 0 đến 9 là hợp lệ và không thành vấn đề nếu giá trị được nhập dưới dạng chuỗi, đó là điều sẽ xảy ra từ một bài đăng biểu mẫu
Tuy nhiên, ctype_digit nó yêu cầu đầu vào là một chuỗi và sẽ trả về false nếu giá trị được truyền vào là một số nguyên…
Ví dụ
var_dump[ctype_digit[123]]; var_dump[ctype_digit['123']]; var_dump[ctype_digit[12345678901234567890]]; var_dump[ctype_digit['12345678901234567890']];
Những màn hình này
________số 8Bạn sẽ có thể sử dụng [string], strval[], v.v. để truyền giá trị dưới dạng chuỗi trước rồi chuyển giá trị đó tới ctype_digit nhưng tôi nhận thấy nếu số quá lớn thì nó vẫn không hoạt động
Ví dụ: bốn cái đầu tiên bên dưới trả về true, nhưng cái cuối cùng trả về false
ctype_digit[strval[12345678901]]; ctype_digit[strval[123456789012]]; ctype_digit[strval[1234567890123]]; ctype_digit[strval[12345678901234]]; ctype_digit[strval[123456789012345]];
Sử dụng biểu thức chính quy
Vì vậy, suy nghĩ ban đầu của tôi là chỉ sử dụng is_integer[] và một người khác đã đề xuất sử dụng ctype_digit nhưng hóa ra sử dụng biểu thức chính quy với preg_match lại là giải pháp tốt nhất. Chỉ cần nhớ khi sử dụng các biểu thức chính quy với PHP để sử dụng các hàm preg* chứ không phải các hàm ereg* vì các hàm sau không được dùng trong PHP 6