English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home Page
  3. Experience Notes
  4. Content

Resumo de verificações de dados comuns no jQuery EasyUI

Easyui's validatebox() provides a custom validation method. 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: 'Postal code does not exist'
 },
 QQ: {
  validator: function (value, param) {
   return /^1-9]\d{4,10}$/.test(value);
  },
  message: 'QQ number is incorrect'
 },
 mobile: {
  validator: function (value, param) {
   return /^((\(\d{2,3})|(\d{3}-))?13\d{9}$/.test(value);
  },
  message: 'Mobile phone number is incorrect'
 },
 loginName: {
  validator: function (value, param) {
   return /^[\u0391-\uFFE5\w]+$/.test(value);
  },
  message: 'Login name is allowed to contain Chinese characters, English letters, numbers, and underscores.'
 },
 safepass: {
  validator: function (value, param) {
   return safePassword(value);
  },
  message: 'Password consists 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'
 }
});
/* Password consists 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})(\d{2})(\d{2})(\d{3))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);
 if (re == null || a.indexOf(re[1]) < 0) return false;
 if (re[2].length == 9) {
  number = number.substr(0, 6) + '19' + number.substr(6);
  d = ['19' + re[4], re[5], re[6].join('-);
 } else d = [re[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;
 }
};

A página deve incluir jquery.js e easyui.min.js　

Código HTML usando o seguinte

<table class="grid" id="uiform">
<tr><td>Nome de usuário：</td>/td><td><input required="true" id="txtUsername" type="text" class="txt03" /></td><td>真实姓名：</td><td><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td></tr>
<tr><td>登录密码：</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>身份证号：</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>手机：</td><td><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td><td>电话：</td><td><input id="txtTel" name="tel" type="text" class="txt03" /></td></tr>
<tr><td>家庭住址：</td><td colspan="3><input validType="equalTo[txtMobile]" style="width:80%" id="txtHomeaddr" name="homeaddr" type="text" class="txt03" /></td></tr>
<tr><td>备注：</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="Checkbox1type="checkbox" /><label>Super Administrator</label>  <input id="Checkbox2type="checkbox" /><label>Disable</label></td></tr> 
</table>

This section 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 the 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 I also hope everyone will support the呐喊 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 relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @ to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Tutorial básico
Você também pode gostar