熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

Jquery 表單驗證類介紹與實例

2013-11-15 12:12:19  來源: JSP教程 

  代碼如下:

<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="jqueryjs" type="text/javascript"></script>  <script src="formValidatejs" type="text/javascript"></script>  <script type="text/javascript">  var formValidate = new formValidate();  formValidateinit({});  </script>    [javascript]  代碼如下: /*  * 通用JS驗證類  * 使用方法  * var formValidate = new formValidate();  * formValidateinit({});  * 注意  * <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;    thisoptions = {  number : {reg : /^[]+$/ str : 必須為數字}  decimal : {reg : /^[]{}(d+)[]+(d+)$/ str : 必須為DECIMAL格式}  english : {reg : /^[AZaz]+$/ str : 必須為英文字母}  upper_english : {reg : /^[AZ]+$/ str : 必須為大寫英文字母}  lower_english : {reg : /^[az]+$/ str : 必須為小寫英文字母}  email : {reg : /^([azAZ]+[_|_|]?)*[azAZ]+@([azAZ]+[_|_|]?)*[azAZ]+[azAZ]{}$/ str : Email格式不正確}  chinese : {reg : /[uEuFAufufad]/ig str : 必須含有中文}  url : {reg : /^[azAz]+://[^s]*/ str : URL格式不正確}  phone : {reg : /^[][][]{}$/ str : 電話號碼格式不正確}  ip : {reg : /^(d+)(d+)(d+)(d+)$/ str : IP地址格式不正確}  money : {reg : /^[]+[][]{}$/ str : 金額格式不正確}  number_letter : {reg : /^[azAZ_]+$/ str : 只允許輸入英文字母數字_}  zip_code : {reg : /^[azAZ ]{}$/ str : 郵政編碼格式不正確}  account : {reg : /^[azAZ][azAZ_]{}$/ str : 賬號名不合法允許字符字母下劃線和數字}  qq : {reg : /[][]{}/ str : QQ賬號不正確}  card : {reg : /^(d{})(||)?(d{})([]d)([]d)(d{})(d|X)?$/ str : 身份證號碼不正確}  };    //初始化 綁定表單 選項  thisinit = function (options) {  thissetOptions(options);  thischeckForm();  };    //設置參數  thissetOptions = function (options) {  for (var key in options) {  if (key in thisoptions) {  thisoptions[key] = options[key];  }  }  };    //檢測表單 包括是否為空最大值 最小值正則驗證  thischeckForm = function () {  $("#formValidate")submit(function () {  var formChind = $("#formValidate")children();  var testResult = true;  formChindeach(function (i) {  var child = formChindeq(i);  var value = childval();  var len = valuelength;  var childSpan = childnext();    //屬性中是否為空的情況  if (childattr(empty)) {  if (childattr(empty) == yes && value == ) {  if (childSpan) {  childSpanhtml();  }  return;  }  }    //屬性中min 和 max 最大和最小長度  var min = null;  var max = null;  if (childattr(min)) min = childattr(min);  if (childattr(max)) max = childattr(max);  if (min && max) {  if (len < min || len > max) {  if (childSpan) {  childSpanhtml();  childSpanhtml( 字符串長度在 + min + + max + 之間);  testResult = false;  return;  }  }  } else if (min) {  if (len < min) {  if (childSpan) {  childSpanhtml();  childSpanhtml( 字符串長度應大於 + min);  testResult = false;  return;  }  }  } else if (max) {  if (len > max) {  if (childSpan) {  childSpanhtml();  childSpanhtml( 字符串長度應小於 + max);  testResult = false;  return;  }  }  }    //正則校驗  if (childattr(validate)) {  var type = childattr(validate);  var result = _thischeck(value type);  if (childSpan) {  childSpanhtml();  if (result != true) {  childSpanhtml( + result);  testResult = false;  }  }  }    });  return testResult;  });  };    //檢測單個正則選項  thischeck = function (value type) {  if (thisoptions[type]) {  var val = thisoptions[type][reg];  if (!valtest(value)) {  return thisoptions[type][str];  }  return true;  } else {  return 找不到該表單驗證正則項;  }  };      }     
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20490.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.