Jquery xác thực biểu mẫu bootstrap 5

jbvalidator là plugin xác thực biểu mẫu dựa trên jQuery mới được tạo cho khung Bootstrap 5 mới nhất và hỗ trợ cả xác thực phía máy khách và phía máy chủ

• Đa ngôn ngữ
• Thông báo lỗi tùy chỉnh
• Quy tắc xác thực tùy chỉnh
• Dễ sử dụng thông qua thuộc tính dữ liệu HTML

Cài đặt

npm i @emretulek/jbvalidator

Hoặc lấy từ jsdelivr CDN

<script src="https://cdn.jsdelivr.net/npm/@emretulek/jbvalidator">script>

LIÊN KẾT BẢN THỬ

• xác thực Html 5
• dữ liệu-v-bằng. id của phần tử phải giống nhau
• dữ liệu-v-min-chọn. nhiều hộp chọn, số lượng có thể chọn tối thiểu
• dữ liệu-v-max-chọn. nhiều hộp chọn, số lượng có thể chọn tối đa
• dữ liệu-hộp kiểm-nhóm. thuộc tính cha của các phần tử hộp kiểm nhóm
• dữ liệu-v-min. thay thế của thuộc tính tối thiểu, điều này có thể được sử dụng cho văn bản loại thuộc tính
• dữ liệu-v-max. thay thế của thuộc tính max, thuộc tính này có thể được sử dụng cho văn bản loại thuộc tính
• data-v-min-length. thay thế của thuộc tính minlength
• dữ liệu-v-chiều dài tối đa. thay thế của thuộc tính maxlength
• data-v-min-size. kích thước tệp tối thiểu của tệp loại đầu vào (byte)
• dữ liệu-v-max-size. kích thước tệp tối đa của tệp loại đầu vào (byte)
• dữ liệu-v-tin nhắn. thông báo lỗi thay thế

phương pháp

• trình xác nhận. thêm xác thực tùy chỉnh mới
• checkAll(formSelector = null, event = null). hiển thị lỗi mà không gửi biểu mẫu, trả lại số lỗi
• errorTrigger(bộ chọn đầu vào, thông báo). hiển thị các thông báo lỗi được trả về từ máy chủ
• tải lại(). tải lại phiên bản sau khi phần tử động được thêm vào

Cách sử dụng

Thuộc tính của biểu mẫu phải hợp lệ hóa

<script src="dist/jbvalidator.min.js"></script>
<script>
    $(function (){

        let validator = $('form.needs-validation').jbvalidator({
            errorMessage: true,
            successClass: true,
            language: "https://emretulek.github.io/jbvalidator/dist/lang/en.json"
        });

        //custom validate methode
        validator.validator.custom = function(el, event){
            if($(el).is('[name=password]') && $(el).val().length < 5){
                return 'Your password is too weak.';
            }
        }

        validator.validator.example = function(el, event){
            if($(el).is('[name=username]') && $(el).val().length < 3){
                return 'Your username is too short.';
            }
        }

        //check form without submit
        validator.checkAll(); //return error count

        //reload instance after dynamic element is added
        validator.reload();
    })
</script>