English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
EasyUI's validatebox() provides a method for custom validation. For this purpose, I have summarized some commonly used data validations as follows
$.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u0391-\uFFE5]+$/.test(value); }, message: 'Please enter Chinese characters' }, ZIP: { validator: function (value, param) { return /^1-9]\d{5}$/.test(value); }, message: 'The postal code does not exist' }, QQ: { validator: function (value, param) { return /^1-9]\d{4,10}$/.test(value); }, message: 'The QQ number is incorrect' }, mobile: { validator: function (value, param) { return /^((\(\d{2,3})|(\d{3}-))?13\d{9}$/.test(value); }, message: 'The phone number is incorrect' }, loginName: { validator: function (value, param) { return /^[\u0391-\uFFE5\w]+$/.test(value); }, message: 'The login name is only allowed to contain Chinese characters, English letters, numbers, and underscores.' }, safepass: { validator: function (value, param) { return safePassword(value); }, message: 'The password is composed of letters and numbers, at least6位 }, equalTo: { validator: function (value, param) { return value == $(param[0]).val(); }, message: 'The characters entered twice are not consistent' }, number: { validator: function (value, param) { return /^\d+$/.test(value); }, message: 'Please enter numbers' }, idcard: { validator: function (value, param) { return idCard(value); }, message: 'Please enter the correct ID card number' } }); /* The password is composed of letters and numbers, at least6位 */ var safePassword = function (value) { return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value)); } var idCard = function (value) { if (value.length == 18 && 18 != value.length) return false; var number = value.toLowerCase(); var d, sum = 0, v = ''10x98765432', w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = '11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91); var re = number.match(/^(\d{2})\d{4))|((\d{2}[x\d])))$2}[x\d])))$2}[x\d])))$3})(\d{4}[x\d])))$2}[x\d])))$2}[x\d])))$3if (re == null || a.indexOf(re[/); ]) < 0) return false;1if (re[ number = number.substr(0,2].length == 9) { ) 6number.substr( + re[19re[ + d = ['6); '19re[ + else d = [re[4], re[5], re[6].join('-); }9], re[10], re[11].join('-); if (!isDateTime.call(d, 'yyyy-MM-dd')) return false; for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i]; return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11)) } var isDateTime = function (format, reObj) { format = format || 'yyyy-MM-dd'; var input = this, o = {}, d = new Date(); var f1 = format.split(',',/[^a-z]+/gi), f2 = input.split(',',/\D+/g), f3 = format.split(',',/[a-z]+/gi), f4 = input.split(',',/\d+/g); var len = f1.length, len1 = f3.length; if (len != f2.length || len1 != f4.length) return false; for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false; for (var i = 0; i < len; i++) o[f1[i]] = f2[i]; o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4); o.MM = s(o.MM, o.M, d.getMonth()) + 1, 12); o.dd = s(o.dd, o.d, d.getDate(), 31); o.hh = s(o.hh, o.h, d.getHours(), 24); o.mm = s(o.mm, o.m, d.getMinutes()); o.ss = s(o.ss, o.s, d.getSeconds()); o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3); if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false; if (o.yyyy < 100) o.yyyy += (o.yyyy > 30 &63; 1900 : 2000); d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms); var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms; return reVal && reObj &63; d : reVal; function s(s1, s2, s3, s4, s5) { s4 = s4 || 60, s5 = s5 || 2; var reVal = s3; if (s1 != undefined && s1 != '' || !isNaN(s1)) reVal = s1 * 1; if (s2 != undefined && s2 != '' && !isNaN(s2)) reVal = s2 * 1; return (reVal == s1 && s1.length != s5 || reVal > s4) &63; -10000 : reVal; } };
The page needs to include jquery.js and easyui.min.js
The following is used in HTML code
<table class="grid" id="uiform"> <tr><td>Login Name:</td>/<td><td><input required="true" id="txtUsername" type="text" class="txt03" /></td><td>Real Name:</td><td><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td></tr> <tr><td>Login Password:</td><td><input validType="safepass" required="true" id="txtPassword" name="password" type="password" class="txt03" /></td><td>Email:</td><td><input id="txtEmail" name="email" validType="email" type="text" class="txt03" /></td></tr> <tr><td>ID Number:</td><td><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td><td>QQ:</td><td><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td></tr> <tr><td>Mobile:</td><td><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td><td>Phone:</td><td><input id="txtTel" name="tel" type="text" class="txt03" /></td></tr> <tr><td>Home Address:</td><td colspan="3><input validType="equalTo[txtMobile]" style="width:80%" id="txtHomeaddr" name="homeaddr" type="text" class="txt03" /></td></tr> <tr><td>Remark:</td><td colspan="3"> <input type="text" style="width:80%" class="txt03" id="txtRemark"></<textarea>/td></tr> <tr><td> </td><td colspan="3><input id="Checkbox1" type="checkbox" /><label>Super Administrator</label> <input id="Checkbox2" type="checkbox" /><label>Disable</label></td></tr> </table>
This piece of JS isIndispensable
$(function(){ $('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) $(this).validatebox(); } });
This is ok
If you need to verify whether the form has passed verification when submitting, you can use the following code
var flag = true; $('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) { if (!$(this).validatebox('isValid')) { flag = false; return; } } } if (flag) alert('Verification passed!'); else alert('Verification failed!');
That's all for this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial more.
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)