jQuery Validate link youtube

Cập nhật: Lượt xem: 884 [ Javascript ]

Validate link youtube trong jquery validate. Giúp xác thực link youtube bằng javascript

jQuery Validate link youtube

Mặc định thì jQuery Validate không có method để validate link youtube, nhưng nó lại cho phép bạn tạo các method mới bằng phương thức addMethod. Chúng ta có thể dùng nó để thêm method validate link youtube như sau :

$.validator.addMethod("youtube", function(value, element) {
    if(value) {
        var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
        return (value.match(p)) ? RegExp.$1 : false;
    }
    else{
        return true;
    }
}, "Please kindly insert a Youtube link");

Sử dụng như sau :

view.form_validator = view.$form.validate({
    rules: {
        video_url: {
            required: false,
            youtube: true
        }
 
    },
});

Phương thức ở trên giúp bạn xác định xem cấu trúc link đúng hay sai, còn dưới đây là để xác định xem video có tồn tại hay không, bằng cách sử dụng phương thức remote để tạo một request lên server của youtube :

video_url: {
    required: false,
    youtube: true,
    remote: {
        url: "https://www.googleapis.com/youtube/v3/videos",
        type: "GET",
        xhrFields: {
            withCredentials: true
        },
        cache: false,
        data: {
            id: function() {
                var url = $('#header-video-input').val();
                var regex = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(\S+)?$/;
                return (url.match(regex)) ? RegExp.$1 : false;
            },
            part:'snippet',
            key:'AIzaSyCGC8aOQSv0uugJtZvj5sgVI-jTT72R4Jo'
        },
        dataFilter: function(response) {
            if(response){
                response = jQuery.parseJSON(response);
                if(response && response.pageInfo && response.pageInfo.totalResults && (response.pageInfo.totalResults > 0)){
                    return true;
                }
            }
            return false;
        }
    }
}

Bạn cần thay đổi key thành key của bạn, key này mình public lên đây, chắc là sẽ có nhiều bạn dùng, nên khả năng bạn sử dụng thì đã reach limit, nên sẽ xảy ra lỗi nhé.

Từ quicktip này, bạn có thể theo như vậy mà tạo nhiều method khác phục vụ cho các mục đích của bạn.

Tác giả: Nguyễn Văn Được