您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

Jquery 表单验证类介绍与实例

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 代码如下:

<form action="" method="post" id="formValidate">  数值:<input name="" type="text" validate="number" /><span></span><br/>  浮点型:<input name="" type="text" validate="decimal" /><span></span><br/>  英文:<input name="" type="text" validate="english" /><span></span><br/>  大写英文:<input name="" type="text" validate="upper_english" /><span></span><br/>  小写英文:<input name="" type="text" validate="lower_english" /><span></span><br/>  邮件格式:<input name="" type="text" validate="email" /><span></span><br/>  是否包含中文:<input name="" type="text" validate="chinese" /><span></span><br/>  URL:<input name="" type="text" validate="url" /><span></span><br/>  电话号码:<input name="" type="text" validate="phone" /><span></span><br/>  IP地址:<input name="" type="text" validate="ip" /><span></span><br/>  金额:<input name="" type="text" validate="money" /><span></span><br/>  数值或者英文或者_:<input name="" type="text" validate="number_letter" /><span></span><br/>  邮政编码:<input name="" type="text" validate="zip_code" /><span></span><br/>  可用账号:<input name="" type="text" validate="account" /><span></span><br/>  QQ:<input name="" type="text" validate="qq" /><span></span><br/>  身份证:<input name="" type="text" validate="card" /><span></span><br/>  数值 允许为空:<input name="" type="text" validate="number" empty='yes' /><span></span><br/>  数值 长度 1-3:<input name="" type="text" validate="number" min=1 max=3 /><span></span><br/>  数值 长度 1-3 允许为空:<input name="" type="text" validate="number" min=1 max=3 empty='yes'/><span></span><br/>  <input name="" type="submit" />  </form>  <script src="jquery.js" type="text/javascript"></script>  <script src="formValidate.js" type="text/javascript"></script>  <script type="text/javascript">  var formValidate = new formValidate();  formValidate.init({});  </script>    [javascript]  代码如下: /*  * 通用JS验证类  * 使用方法:  * var formValidate = new formValidate();  * formValidate.init({});  * 注意:  * <form action="" method="post" id="formValidate">  * id为formValidate  *  * <input name="" type="text" validate="zip_code" empty="yes" min=10 max=10 /><span></span>  * validate="zip_code" 验证是否是邮政编码  * empty="yes" 验证是否允许为空  * min=10 最小长度  * max=10 最大长度  * <span></span> 显示提示内容  */  var formValidate = function () {    var _this = this;    this.options = {  number : {reg : /^[0-9]+$/, str : '必须为数字'},  decimal : {reg : /^[-]{0,1}(d+)[.]+(d+)$/ , str : '必须为DECIMAL格式'},  english : {reg : /^[A-Za-z]+$/, str : '必须为英文字母'},  upper_english : {reg : /^[A-Z]+$/, str : '必须为大写英文字母'},  lower_english : {reg : /^[a-z]+$/, str : '必须为小写英文字母'},  email : {reg : /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/, str : 'Email格式不正确'},  chinese : {reg : /[u4E00-u9FA5uf900-ufa2d]/ig, str : '必须含有中文'},  url : {reg : /^[a-zA-z]+://[^s]*/, str : 'URL格式不正确'},  phone : {reg : /^[1][3][0-9]{9}$/ , str : '电话号码格式不正确'},  ip : {reg : /^(d+).(d+).(d+).(d+)$/ , str : 'IP地址格式不正确'},  money : {reg : /^[0-9]+[.][0-9]{0,3}$/ , str : '金额格式不正确'},  number_letter : {reg : /^[0-9a-zA-Z_]+$/ , str : '只允许输入英文字母、数字、_'},  zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '邮政编码格式不正确'},  account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '账号名不合法,允许5-16字符,字母下划线和数字'},  qq : {reg : /[1-9][0-9]{4,}/ , str : 'QQ账号不正确'},  card : {reg : /^(d{6})(18|19|20)?(d{2})([01]d)([0123]d)(d{3})(d|X)?$/ , str : '身份证号码不正确'},  };    //初始化 绑定表单 选项  this.init = function (options) {  this.setOptions(options);  this.checkForm();  };    //设置参数  this.setOptions = function (options) {  for (var key in options) {  if (key in this.options) {  this.options[key] = options[key];  }  }  };    //检测表单 包括是否为空,最大值 最小值,正则验证  this.checkForm = function () {  $("#formValidate").submit(function () {  var formChind = $("#formValidate").children();  var testResult = true;  formChind.each(function (i) {  var child = formChind.eq(i);  var value = child.val();  var len = value.length;  var childSpan = child.next();    //属性中是否为空的情况  if (child.attr('empty')) {  if (child.attr('empty') == 'yes' && value == '') {  if (childSpan) {  childSpan.html('');  }  return;  }  }    //属性中min 和 max 最大和最小长度  var min = null;  var max = null;  if (child.attr('min')) min = child.attr('min');  if (child.attr('max')) max = child.attr('max');  if (min && max) {  if (len < min || len > max) {  if (childSpan) {  childSpan.html('');  childSpan.html(' 字符串长度在' + min + '与' + max + '之间');  testResult = false;  return;  }  }  } else if (min) {  if (len < min) {  if (childSpan) {  childSpan.html('');  childSpan.html(' 字符串长度应大于' + min);  testResult = false;  return;  }  }  } else if (max) {  if (len > max) {  if (childSpan) {  childSpan.html('');  childSpan.html(' 字符串长度应小于' + max);  testResult = false;  return;  }  }  }    //正则校验  if (child.attr('validate')) {  var type = child.attr('validate');  var result = _this.check(value, type);  if (childSpan) {  childSpan.html('');  if (result != true) {  childSpan.html(' ' + result);  testResult = false;  }  }  }    });  return testResult;  });  };    //检测单个正则选项  this.check = function (value, type) {  if (this.options[type]) {  var val = this.options[type]['reg'];  if (!val.test(value)) {  return this.options[type]['str'];  }  return true;  } else {  return '找不到该表单验证正则项';  }  };      }