Để sử dụng được validation plugin chúng ta bắt đầu như sau:
Trong file index.php thêm dòng sau vào trong thẻ <header></header>
[codesyntax lang=”php”]
<script src="validate/jquery.js"></script>[/codesyntax]
<script src="validate/jquery.validate.js"></script>
Đây chính là thư viện jquery và plugin validate bạn có thể dowload ở link: https://www.mediafire.com/?xszd1njw6r87rc9
Tiếp theo chúng ta cần kiểm tra như sau:
Khi form #signupForm được submit thì cần kiểm tra các thông tin
– user_name: không được trống, tối thiểu 3 ký tự
– user_pass: không được trống, tối thiểu 5 ký tự
– user_pass2: không được trống, tối thiểu 5 ký tự, trùng khớp với user_pass
– user_email: không được trống, đúng định dạng
Nếu một trong các trường trên vi phạm yêu cầu thì đưa ra thông báo lỗi.
Và chúng ta sẽ đưa ra các tập luật và các dòng thông báo như sau:
[codesyntax lang=”php”]
<script type="text/javascript">[/codesyntax]
$().ready(function() {
$("#signupForm").validate({
rules: {
// xay dung cac tap luat
username: {
required: true,
minlength: 3
},
user_pass: {
required: true,
minlength: 5
},
user_pass2: {
required: true,
minlength: 5,
equalTo: "#user_pass"
},
user_email: {
required: true,
email: true
},
},
messages: {
// cac cau thong bao
user_name: "Vui lòng điền tên đăng nhập",
username: {
required: "Vui lòng điền tên đăng nhập",
minlength: "Tên đăng nhập tối thiểu 3 ký tự"
},
user_pass: {
required: "Vui lòng điền tên mật khẩu",
minlength: "Mật khẩu tối thiểu 5 ký tự"
},
user_pass2: {
required: "Vui lòng nhập lại mật khẩu",
minlength: "Mật khẩu tối thiểu 5 ký tự",
equalTo: "Nhập lại mật khẩu chưa chính xác"
},
user_email:{
required: "Vui lòng nhập email",
email: "Email chưa đúng định dạng"
},
}
});
});
</script>
Và chúng ta sẽ có file index.php như sau:
[codesyntax lang=”php”]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/codesyntax]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert user</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.user_text {
margin: 10px;
overflow: hidden;
}
.user_bottom{
width: 387px;
text-align: center;
}
.thongbao{
width: 250px;
float: left;
}
.thongbao3{
width: 200px;
float: left;
margin-left: 30px;
}
.lable_text {
width: 150px;
float: left;
}
.classtext {
float: left;
width: 300px;
}
.error {
color: red;
}
.success {
color: blue;
}
.wapper{
width: 800px;
margin: auto;
}
#captcha{float: left;}
</style>
<script src="validate/jquery.js"></script>
<script src="validate/jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#signupForm").validate({
rules: {
// xay dung cac tap luat
username: {
required: true,
minlength: 3
},
user_pass: {
required: true,
minlength: 5
},
user_pass2: {
required: true,
minlength: 5,
equalTo: "#user_pass"
},
user_email: {
required: true,
email: true
},
},
messages: {
user_name: "Vui lòng điền tên đăng nhập",
username: {
required: "Vui lòng điền tên đăng nhập",
minlength: "Tên đăng nhập tối thiểu 3 ký tự"
},
user_pass: {
required: "Vui lòng điền tên mật khẩu",
minlength: "Mật khẩu tối thiểu 5 ký tự"
},
user_pass2: {
required: "Vui lòng nhập lại mật khẩu",
minlength: "Mật khẩu tối thiểu 5 ký tự",
equalTo: "Nhập lại mật khẩu chưa chính xác"
},
user_email:{
required: "Vui lòng nhập email",
email: "Email chưa đúng định dạng"
},
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// Sự kiện khi nhập vào user_name
$("#user_name").keyup(function() {
if ($(this).val() != '') {
// Gán text cho class thongbao trước khi AJAX response
$(".thongbao").html('checking username...');
}
// Dữ liệu sẽ gởi đi
var form_data = {
action : 'check_user',
user_name : $(this).val()
};
$.ajax({
type : "POST", // Phương thức gởi đi
url : "data.php", // File xử lý dữ liệu được gởi
data : form_data, // Dữ liệu gởi đến cho url
success : function(result) { // Hàm chạy khi dữ liệu gởi thành công
$(".thongbao").html(result);
}
});
});
});
</script>
</head>
<body>
<div class="wapper">
<form method="post" name="fcheck" id="signupForm" action="index.php">
<div class="user_text">
<h2>Đăng ký thành viên</h2>
<div class="user_text">
<label class="lable_text">Tên đăng nhập:</label> <input type="text"
class="classtext required" name="user_name" id="user_name"
autocomplete="off" value="">
<div class="thongbao"></div>
</div>
<div class="user_text">
<label class="lable_text">Mật khẩu:</label> <input type="password"
class="classtext" name="user_pass" id="user_pass"
autocomplete="off" value="">
<div class="thongbao1"></div>
</div>
<div class="user_text">
<label class="lable_text">Xác nhận mật khẩu:</label> <input
type="password" class="classtext" name="user_pass2" id="user_pass2"
autocomplete="off" value="">
<div class="thongbao2"></div>
</div>
<div class="user_text">
<label class="lable_text">Email:</label> <input
type="email" class="classtext" name="user_email" id="user_email"
autocomplete="off" value="">
<div class="thongbao3"></div>
</div>
<div class="user_bottom" >
<input type="submit" id="btn" name="dangky" value="Đăng ký">
</div>
</div>
</form>
</div>
</body>
</html>
Bây giờ bạn ra trình duyệt gọi đến file index.php bạn bấm đăng ký khi chưa nhập thông tin và thu được kết quả.
Đây là source bạn có thể tham khảo:
https://www.mediafire.com/?qvzfoqus3srbqmb
Chúc bạn lap trinh web thành công!
Xem thêm:
>>> Chuyên in decal trong giá rẻ
>>.> Địa chỉ in card visit giá rẻ
0 nhận xét:
Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.