Chương 9-Bài 18. Kiểm tra ràng buộc dữ liệu (Validation) phía Client
Tác giả: Dương Nguyễn Phú Cường
Ngày đăng:
6/3/2025, 2:39
Lượt xem: 239
Ràng buộc dữ liệu phía Người dùng (Client), thường sử dụng Javascript để bắt/cảnh báo các trường hợp dữ liệu sai so với các quy luật (rules) mà mình định nghĩa trước. Một số quy luật (rule) ràng buộc dữ liệu thường sử dụng như:
Step 1: tích hợp thư viện
Step 2: liên kết thư viện
required: bắt buộc nhậpminlength: độ dài chuỗi nhập ít nhất phải từminlengthký tự trở lênmaxlength: độ dài chuỗi nhập tối đa chỉ được đếnmaxlengthký tự- ... Các quy luật có thể xem thêm tại: https://jqueryvalidation.org/documentation/
Jquery validation để tạo các ràng buộc cho nhanh nhé.
Step 1: tích hợp thư viện Jquey validation vào dự án
- Download thư viện tại: https://jqueryvalidation.org/
- Giải nén file. Đổi tên thư mục
dist->jquery-validationđể tiện quản lý thư viện - Copy thư mục
jquery-validationvào thư mục dự án/public/vendor/jquery-validation
Step 2: liên kết thư viện jquery validation vào layout backend
- Hiệu chỉnh view `resources\views\backend\layout\master.blade.php`:
<!doctype html>
<html lang="en">
<head>
...
</head>
<body>
...
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('vendor/popperjs/popper.min.js') }}"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>
<!-- Thư viện Jquery validation -->
<script src="{{ asset('vendor/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('vendor/jquery-validation/localization/messages_vi.min.js') }}"></script>
<!-- Các custom script dành riêng cho từng view -->
@yield('custom-scripts')
</body>
</html>
Step 3: thêm kiểm tra ràng buộc dữ liệu (validation) cho chức năng `Thêm mới chủ đề`:
- Hiệu chỉnh view `resources\views\backend\chude\create.blade.php`
@extends('backend.layout.master')
@section('title')
Thêm mới Chủ đề
@endsection
@section('feature-title')
Thêm mới chủ đề
@endsection
@section('feature-description')
Thêm mới Chủ đề. Vui lòng nhập thông tin và bấm Lưu.
@endsection
@section('content')
<form id="frmChuDe" name="frmChuDe" method="post" action="{{ route('backend.chude.store') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="cd_ten">Tên chủ đề</label>
<input type="text" class="form-control" id="cd_ten" name="cd_ten" aria-describedby="cd_tenHelp" placeholder="Nhập tên chủ đề">
<small id="cd_tenHelp" class="form-text text-muted">Nhập tên chủ đề. Giới hạn trong 50 ký tự.</small>
</div>
<button class="btn btn-primary">Lưu</button>
</form>
@endsection
@section('custom-scripts')
<script>
$(document).ready(function () {
$("#frmChuDe").validate({
rules: {
cd_ten: {
required: true,
minlength: 3,
maxlength: 50
},
},
messages: {
cd_ten: {
required: "Vui lòng nhập tên Chủ đề",
minlength: "Tên Chủ đề phải có ít nhất 3 ký tự",
maxlength: "Tên Chủ đề không được vượt quá 50 ký tự"
},
},
errorElement: "em",
errorPlacement: function (error, element) {
// Thêm class `invalid-feedback` cho field đang có lỗi
error.addClass("invalid-feedback");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("label"));
} else {
error.insertAfter(element);
}
// Thêm icon "Kiểm tra không Hợp lệ"
if (!element.next("span")[0]) {
$("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
.insertAfter(element);
}
},
success: function (label, element) {
// Thêm icon "Kiểm tra Hợp lệ"
if (!$(element).next("span")[0]) {
$("<span class='glyphicon glyphicon-ok form-control-feedback'></span>")
.insertAfter($(element));
}
},
highlight: function (element, errorClass, validClass) {
$(element).addClass("is-invalid").removeClass("is-valid");
},
unhighlight: function (element, errorClass, validClass) {
$(element).addClass("is-valid").removeClass("is-invalid");
}
});
});
</script>
@endsection
Ủng hộ tác giả
Bình luận
Bình luận của bạnNền tảng các kiến thức học tập
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!