Với ý tưởng ban đầu là tạo các regEx để check hợp lệ và nạp lỗi vào các thẻ HTML đã định sẵn.
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Validate Lib Demo</title>
<style type="text/css">
.message {
color: red;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.validate-1.9.1.min.js"></script>
<script type="text/javascript" src="my-simple-validate.js"></script>
</head>
<body>
<form method="get" accept-charset="utf-8" style="width:600px;margin: 0px auto;" id="formDemo">
<fieldset>
<legend>Demo jQuery Validation</legend>
<div>
<label>Số</label>
<input id="txtNumber" name="ho" type="text" placeholder="Vui lòng nhập số">
</div>
<p id="txtNumber_message" class="message"></p>
<div>
<label>Địa chỉ mail</label>
<input id="txtDiaChi" name="diachi" type="text" placeholder="Vui lòng nhập địa chỉ" />
</div>
<div>
<label>Ten</label>
<input id="txtTen" type="text" placeholder="Vui lòng nhập tên" />
<p id="txtTen_message" class="message"></p>
</div>
<div>
<label>Email mới</label>
<input id="txtEmailMoi" class="validator" type="text" placeholder="Vui lòng nhập tên" onkeyup="Validator(this,'required len(6,8) email','',null)" />
<p id="txtEmailMoi_message" class="message"></p>
</div>
<div>
<label>Mật khẩu</label>
<input id="txtPass" name="pass" type="text" placeholder="Nhập mật khẩu" />
</div>
<div>
<label>Mật khẩu</label>
<input id="txtRePass" class="validator" onkeyup="Validator(this,'required cfpass(txtPass)','',null)" name="repass" type="text" placeholder="Nhập lại mật khẩu" />
<p id="txtRePass_message" class="message"></p>
</div>
<div>
<select id="car" class="validator" name="cars" onblur="Validator(this,'required','',null)">
<option value></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<p id="car_message" class="message"></p>
</div>
<div>
<label>Ngày tháng</label>
<input id="txtdate" class="validator" onkeyup="Validator(this,'required date','',null)" name="date" type="text" placeholder="Nhập ngày tháng" />
<p id="txtdate_message" class="message"></p>
</div>
<br/>
<button type="button" id="btnSubmit" onclick="return SubmitForm()">Submit event</button>
</fieldset>
</form>
</body>
</html>
Code JS:
//--regEx----------------------------------------------------------------------------------------//
var regNumber = /^\d+$/;
var regEmail = /^(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i;
var regText = /[a-zA-Z0-9_]+$/;
var regVietnamese = /[a-zA-Z ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂưăạảấầẩẫậắằẳẵặẹẻẽềềểỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ]+$/;
//--errMessage-----------------------------------------------------------------------------------//
var error = "";
var REQUIRED_DF = "Trường bắt buộc";
var INVALID_DF = "Giá trị không hợp lệ";
var NUMBER_DF = "Giá trị nhập vào phải là số";
var EMAIL_DF = "Email không hợp lệ";
var TEXT_DF = "Giá trị nhập vào phải là chữ cái, chữ số hoặc ký tự gạch dưới";
var VIETNAMESE_DF = "Giá trị nhập vào phải là chữ cái tiếng Việt hoặc khoảng trắng";
var LEN_MINMAX_DF = "Giá trị nhập vào trong khoảng {0} - {1} ký tự";
var LEN_MIN_DF = "Giá trị nhập vào ít nhất {0} ký tự";
var LEN_MAX_DF = "Giá trị nhập vào không quá {0} ký tự";
var PASSWORD_NOT_MATCH_DF = "Mật khẩu không khớp";
var DATE_NOT_VALID_DF = "Ngày tháng không hợp lệ";
//---custom
var REQUIRED = " là trường bắt buộc";
var INVALID = " không hợp lệ";
var NUMBER = " nhập vào phải là số";
var EMAIL = " không hợp lệ";
var TEXT = " nhập vào phải là chữ cái, chữ số hoặc ký tự gạch dưới";
var VIETNAMESE = " nhập vào phải là chữ cái tiếng Việt hoặc khoảng trắng";
var LEN_MINMAX = " nhập vào trong khoảng {0} - {1} ký tự";
var LEN_MIN = " nhập vào ít nhất {0} ký tự";
var LEN_MAX = " nhập vào không quá {0} ký tự";
var PASSWORD_NOT_MATCH = " không khớp";
var DATE_NOT_VALID = "Ngày tháng không hợp lệ";
//--typeCheck------------------------------------------------------------------------------------//
//typeCheck 'required number email text vi len(6,x) cfpass(id_pass) date'
function Validator(item, typeCheck, description, customMessage) {
//khởi gán lỗi
error = "";
//mô tả trường
if (description == null)
description = "";
// lấy id
var itemId = $(item).attr('id');
//console.log(itemId);
//kiểm tra thuộc tính: required
//console.log(!regNumber.test($(item).val()));
//var attr = $(item).attr('required');
// if (typeof attr !== typeof undefined && attr !== false && !$.trim($(item).val()).length) {
// error = REQUIRED;
// } else {
var subTypeCheck = typeCheck.split(' ');
for (var i = 0; i < subTypeCheck.length; i++) {
//alert(subTypeCheck.length)
//console.log(subTypeCheck);
// console.log('+'+subTypeCheck[i]+'+');
// console.log('++'+$(item).val()+'+');
var check = subTypeCheck[i];
// variables
var minVal = 0;
var maxVal = 0;
var lenCheck = 0;
var prePass = "";
var reEnterPass = "";
//--- len check:
if (check.includes('len')) {
check = 'len';
var arrNum = subTypeCheck[i].replace('len(', '').replace(')', '').split(',');
if (!isNaN(arrNum[0]) && !isNaN(arrNum[1])) {
minVal = Number(arrNum[0]);
maxVal = Number(arrNum[1]);
lenCheck = 0;
} else if (!isNaN(arrNum[0])) {
minVal = Number(arrNum[0]);
lenCheck = 1;
} else if (!isNaN(arrNum[1])) {
maxVal = Number(arrNum[1]);
lenCheck = 2;
}
}
//--- re-enter password check
if (check.includes('cfpass')) {
check = 'cfpass';
var idItemPass = '#' + subTypeCheck[i].replace('cfpass(', '').replace(')', '');
prePass = $(idItemPass).val();
reEnterPass = $(item).val();
}
//--------------------------------------CHECK----------------------
switch (check) {
case 'required':
if (!$.trim($(item).val()).length) {
error = REQUIRED;
}
break;
case 'len':
var lenValue = $.trim($(item).val()).length;
switch (lenCheck) {
case 0:
console.log('minmaxx');
if (lenValue < minVal || lenValue > maxVal)
error = format(LEN_MINMAX, minVal, maxVal);
break;
case 1:
console.log('minx');
if (lenValue < minVal)
error = format(LEN_MIN, minVal);
break;
case 2:
console.log('maxx');
if (lenValue > maxVal)
error = format(LEN_MAX, maxVal);
break;
}
break;
case 'text':
if (!regText.test($(item).val())) {
error = TEXT;
}
break;
case 'number':
if (!regNumber.test($(item).val())) {
error = NUMBER;
}
break;
case 'email':
if (!regEmail.test($(item).val())) {
error = EMAIL;
}
break;
case 'vi':
if (!regVietnamese.test($(item).val())) {
error = VIETNAMESE;
}
break;
case 'cfpass':
if (prePass != reEnterPass)
error = PASSWORD_NOT_MATCH;
break;
case 'date':
if (!isValidVietnamDate($.trim($(item).val())))
error = DATE_NOT_VALID;
break;
}
console.log(error);
if (error != "")
break;
}
//------------------------------------------END CHECK ------------------------- //
//------------ SHOW error ---
if (error != "") {
//console.log(customMessage);
if (customMessage == null)
$('#' + itemId + '_message').html(description + error);
else
$('#' + itemId + '_message').html(customMessage);
} else {
//console.log("YES");
$('#' + itemId + '_message').empty();
}
}
//---------------- SUBMIT FORM
function SubmitForm() {
var total = "";
$(".validator").each(function() {
var lstAtrr = getAttributes($(this)); // lấy tất cả thuộc tính
console.log(lstAtrr["id"]); // lấy giá trị từng thuộc tính
console.log(Object.keys(lstAtrr)); // lấy tất cả key thành mảng
lstAllKey = Object.keys(lstAtrr);
if (lstAllKey.includes('onblur'))
$(this).blur();
if (lstAllKey.includes('onclick'))
$(this).click();
if (lstAllKey.includes('onkeyup'))
$(this).keyup();
if (lstAllKey.includes('onkeydown'))
$(this).keydown();
if (lstAllKey.includes('onkeypress'))
$(this).keypress();
if (lstAllKey.includes('onfocus'))
$(this).focus();
if (lstAllKey.includes('onchange'))
$(this).change();
//
// kiểm tra còn lỗi hay không??
var messId = '#' + lstAtrr["id"] + '_message';
console.log($(messId).html());
// if($(messId).html()!='')
// return false;
// return true;
total = total + $(messId).html();
// console.log('TOTAL=');
// console.log(total);
});
if (total == "") {
console.log("FORM is true");
return true;
} else {
console.log("FORM is false");
return false;
}
}
//--------------- Các hàm phụ trợ-------------------------.......
// lấy tất cả các thuộc tính element
function getAttributes($node) {
var attrs = {};
$.each($node[0].attributes, function(index, attribute) {
attrs[attribute.name] = attribute.value;
});
return attrs;
}
// print format
//-- print("Hello, {0}! The answer is {1}.", "World", 42);
function format(fmt, ...args) {
if (!fmt.match(/^(?:(?:(?:[^{}]|(?:\{\{)|(?:\}\}))+)|(?:\{[0-9]+\}))+$/)) {
throw new Error('invalid format string.');
}
return fmt.replace(/((?:[^{}]|(?:\{\{)|(?:\}\}))+)|(?:\{([0-9]+)\})/g, (m, str, index) => {
if (str) {
return str.replace(/(?:{{)|(?:}})/g, m => m[0]);
} else {
if (index >= args.length) {
throw new Error('argument index is out of range in format');
}
return args[index];
}
});
}
//-------------------
function isValidVietnamDate(dateDmy) {
if (dateDmy.includes('/'))
return isValidDmyWithSeparated(dateDmy, '/');
else
return isValidDmyWithSeparated(dateDmy, '-');
}
//Hàm chính kiểm tra ngày tháng separated = / or -
function isValidDmyWithSeparated(dateDmy, separated) {
var arr = dateDmy.split(separated);
console.log(arr.length);
if (arr.length != 3)
return false;
var day = Number(arr[0]);
var month = Number(arr[1]);
var year = Number(arr[2]);
if (isNaN(day) || isNaN(month) || isNaN(year) || year < 1000)
return false;
else {
var dateMdy = month + separated + day + separated + year;
return validateMdy(dateMdy, separated);
}
}
//input is M/d/yyyy or MM/dd/yyyy
function validateMdy(input, separated) {
var date = new Date(input);
input = input.split(separated);
return date.getMonth() + 1 === +input[0] &&
date.getDate() === +input[1] &&
date.getFullYear() === +input[2];
}
Không có nhận xét nào:
Đăng nhận xét