表单验证插件 Jquery 表单验证类介绍与实例

Jquery 表单验证类介绍与实例  

<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/>  数值 长度 <input name= type=text validate="number" min= max= /><span></span><br/>  数值 长度 允许为空 <input name= type=text validate="number" min= max= 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= max= /><span></span>  * validate="zip_code" 验证是否是邮政编码  * empty="yes" 验证是否允许为空  * min= 最小长度  * max= 最大长度  * <span></span> 显示提示内容  */  var formValidate = function () {    var _this = this;    this options = {  number : {reg : /^[ ]+$/ str : 必须为数字 }   decimal : {reg : /^[ ]{ }(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 Z ]+[_|_| ]?)*[a zA Z ]+@([a zA Z ]+[_|_| ]?)*[a zA Z ]+ [a zA Z]{ }$/ str : Email格式不正确 }   chinese : {reg : /[u E u FA uf ufa d]/ig str : 必须含有中文 }   url : {reg : /^[a zA z]+://[^s]*/ str : URL格式不正确 }   phone : {reg : /^[ ][ ][ ]{ }$/ str : 电话号码格式不正确 }   ip : {reg : /^(d+) (d+) (d+) (d+)$/ str : IP地址格式不正确 }   money : {reg : /^[ ]+[ ][ ]{ }$/ str : 金额格式不正确 }   number_letter : {reg : /^[ a zA Z_]+$/ str : 只允许输入英文字母 数字 _ }   zip_code : {reg : /^[a zA Z ]{ }$/ str : 邮政编码格式不正确 }   account : {reg : /^[a zA Z][a zA Z _]{ }$/ str : 账号名不合法 允许 字符 字母下划线和数字 }   qq : {reg : /[ ][ ]{ }/ str : QQ账号不正确 }   card : {reg : /^(d{ })( | | )?(d{ })([ ]d)([ ]d)(d{ })(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 ( );  }  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 ( );  childSpan ( 字符串长度在 + min + 与 + max + 之间 );  testResult = false;  return;  }  }  } else if (min) {  if (len < min) {  if (childSpan) {  childSpan ( );  childSpan ( 字符串长度应大于 + min);  testResult = false;  return;  }  }  } else if (max) {  if (len > max) {  if (childSpan) {  childSpan ( );  childSpan ( 字符串长度应小于 + max);  testResult = false;  return;  }  }  }    //正则校验  if (child attr( validate )) {  var type = child attr( validate );  var result = _this check(value type);  if (childSpan) {  childSpan ( );  if (result != true) {  childSpan ( + 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 找不到该表单验证正则项 ;  }  };      }      lishixinzhi/Article/program/Java/JSP/201311/20490