Giới hạn nhập URL trong input với jQuery

15/05/2014

Thỉnh thoảng các bạn sẽ muốn giới hạn người dùng nhập không quá một URL hoặc ngăn ngừa nhập những từ giống nhau trong một thẻ input box. Với jQuery điều này sẽ dễ dàng được thực hiện, và các bạn có thể tận dụng code trong bài viết này để áp dụng cho những mục đích khác của mình sau này.

multipal-url-validation

Xem Demo | Download

HTML

Trước hết chúng ta cần có định dạng html như sau :

<div id="error"></div>
<textarea id="description" cols="40" rows="5"></textarea><br />
<input type="button" id="submit" value="submit">

jQuery

Và đây là đoạn jQuery sử dụng phương thức match() để tìm chuỗi từ input box. Chúng ta sẽ đếm số lượng url có trong input box và thông báo khi người dùng nhập quá số lượng.

$(document).ready(function() {
$('#description').bind('keyup', function() {
    var textArea = $(this).val().match(/http:\/\//g); // search for string
    var UrlNoAllowed = 1;
    if(textArea!==null && textArea.length> UrlNoAllowed) //check wheather it is NULL
    {
        $("#submit").attr("disabled", "disabled"); // disable submit button
        $("#error").html("Not allowed to enter more than 1 URL!"); //outpur error
    }else{
        $("#submit").removeAttr("disabled"); // restore submit button
        $("#error").html(""); //restore output error
    }
});    
});

Mình mong là với đoạn jQuery bên trên, các bạn sẽ có thể hiểu rõ hơn về cách sử dụng cũng như cách dùng jQuery để so sánh chuỗi.

Chúc các bạn thành công !

Tags:

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !