js验证网址常见验证代码合集

发一个利用js验证网址是否正确,email格式是否正确,是否为数字及数字的范围,密码或字符长度及是否相等及要求的最小字符串长度,输入是否为空等Javascript常见验证代码合集,用的上的朋友可以拿去了自行添加整理。

关键的JavaScript代码函数:

  1. /**  
  2. * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息.  
  3.  
  4. * @author www.phpernote.com  
  5. * @version 1.0  
  6. * @description 2012-05-16  
  7. */  
  8. var checkData=new function(){ 
  9. var idExt="_phpernote_Span";//生成span层的id后缀  
  10. /**  
  11. * 得到中英文字符长(中文为2个字符)  
  12.  
  13. * @param {} 
  14. * str  
  15. * @return 字符长  
  16. */  
  17. this.length=function(str){ 
  18.     var p1=new RegExp('%u..''g'); 
  19.     var p2=new RegExp('%.''g'); 
  20.     return escape(str).replace(p1, '').replace(p2, '').length; 
  21. /**  
  22. * 删除对应id元素  
  23. */  
  24. this.remove=function(id){ 
  25.     var idObject=document.getElementById(id); 
  26.     if(idObject != null)  
  27.     idObject.parentNode.removeChild(idObject); 
  28. /**  
  29. * 在对应id后面错误信息  
  30.  
  31. * @param id:需要显示错误信息的id元素  
  32. * str:显示错误信息  
  33. */  
  34. this.appendError=function(id, str){ 
  35.     this.remove(id + idExt);// 如果span元素存在,则先删除此元素  
  36.     var spanNew=document.createElement("span");// 创建span  
  37.     spanNew.id=id + idExt;// 生成spanid  
  38.     spanNew.style.color="red"
  39.     spanNew.appendChild(document.createTextNode(str));// 给span添加内容  
  40.     var inputId=document.getElementById(id); 
  41.     inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span  
  42. /**  
  43. * @description 过滤所有空格字符。  
  44. * @param str:需要去掉空间的原始字符串  
  45. * @return 返回已经去掉空格的字符串  
  46. */  
  47. this.trimSpace=function(str){ 
  48.     str+=''
  49.     while ((str.charAt(0) == ' ') || (str.charAt(0) == '???') || (escape(str.charAt(0)) == '%u3000'))  
  50.     str=str.substring(1, str.length); 
  51.     while ((str.charAt(str.length - 1) == ' ') || (str.charAt(str.length - 1) == '???') || (escape(str.charAt(str.length - 1)) == '%u3000'))  
  52.     str=str.substring(0, str.length - 1); 
  53.     return str; 
  54. /**  
  55. * 过滤字符串开始部分的空格\字符串结束部分的空格\将文字中间多个相连的空格变为一个空格  
  56.  
  57. * @param {Object} 
  58. * inputString  
  59. */  
  60. this.trim=function(inputString){ 
  61.     if(typeof inputString != "string"){ 
  62.         return inputString; 
  63.     } 
  64.     var retValue=inputString; 
  65.     var ch=retValue.substring(0, 1); 
  66.     while (ch == " "){ 
  67.         // 检查字符串开始部分的空格  
  68.         retValue=retValue.substring(1, retValue.length); 
  69.         ch=retValue.substring(0, 1); 
  70.     } 
  71.     ch=retValue.substring(retValue.length - 1, retValue.length); 
  72.     while (ch == " "){ 
  73.         // 检查字符串结束部分的空格  
  74.         retValue=retValue.substring(0, retValue.length - 1); 
  75.         ch=retValue.substring(retValue.length - 1, retValue.length); 
  76.     } 
  77.     while (retValue.indexOf(" ") != -1){ 
  78.         // 将文字中间多个相连的空格变为一个空格  
  79.         retValue=retValue.substring(0, retValue.indexOf(" ")) + retValue.substring(retValue.indexOf(" ") + 1, retValue.length); 
  80.     } 
  81.     return retValue; 
  82. /**  
  83. * 过滤字符串,指定过滤内容,如果内容为空,则默认过滤 '~!@#$%^&*()-+."  
  84.  
  85. * @param {Object} 
  86. * str  
  87. * @param {Object} 
  88. * filterStr  
  89.  
  90. * @return 包含过滤内容,返回True,否则返回false; 
  91. */  
  92. this.filterStr=function(str, filterString){ 
  93.     filterString=filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString; 
  94.     var ch; 
  95.     var i; 
  96.     var temp; 
  97.     var error=false;// 当包含非法字符时,返回True  
  98.     for (i=0;i <= (filterString.length - 1);i++){ 
  99.         ch=filterString.charAt(i); 
  100.         temp=str.indexOf(ch); 
  101.         if(temp != -1){ 
  102.             error=true
  103.             break
  104.         } 
  105.     } 
  106.     return error; 
  107. this.filterStrSpan=function(id, filterString){ 
  108.     filterString=filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString; 
  109.     var val=document.getElementById(id); 
  110.     if(this.filterStr(val.value, filterString)){ 
  111.         val.select(); 
  112.         var str="不能包含非法字符" + filterString; 
  113.         this.appendError(id, str); 
  114.         return false
  115.     }else
  116.         this.remove(id + idExt); 
  117.         return true
  118.     } 
  119. /**  
  120. * 检查是否为网址  
  121.  
  122. * @param {} 
  123. * str_url  
  124. * @return {Boolean}true:是网址,false:<b>不是</b>网址; 
  125. */  
  126. this.isURL=function(str_url) {// 验证url  
  127.     var strRegex="^((https|http|ftp|rtsp|mms)?://)"  
  128.     + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@  
  129.     + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184  
  130.     + "|" // 允许IP和DOMAIN(域名)  
  131.     + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.  
  132.     + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名  
  133.     + "[a-z]{2,6})" // first level domain- .com or .museum  
  134.     + "(:[0-9]{1,4})?" // 端口- :80  
  135.     + "((/?)|" // a slash isn't required if there is no file name  
  136.     + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$"
  137.     var re=new RegExp(strRegex); 
  138.     return re.test(str_url); 
  139. this.isURLSpan=function(id){ 
  140.     var val=document.getElementById(id); 
  141.     if(!this.isURL(val.value)){ 
  142.         val.select(); 
  143.         var str="链接不符合格式;"
  144.         this.appendError(id, str); 
  145.         return false
  146.     }else
  147.         this.remove(id + idExt); 
  148.         return true
  149.     } 
  150. /**  
  151. * 检查是否为电子邮件  
  152.  
  153. * @param {} 
  154. * str  
  155. * @return {Boolean}true:电子邮件,false:<b>不是</b>电子邮件; 
  156. */  
  157. this.isEmail=function(str){ 
  158.     var re=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 
  159.     return re.test(str); 
  160. this.isEmailSpan=function(id){ 
  161.     var val=document.getElementById(id); 
  162.     if(!this.isEmail(val.value)){ 
  163.         val.select(); 
  164.         var str="邮件不符合格式;"
  165.         this.appendError(id, str); 
  166.         return false
  167.     }else
  168.         this.remove(id + idExt); 
  169.         return true
  170.     } 
  171. /**  
  172. * 检查是否为数字  
  173.  
  174. * @param {} 
  175. * str  
  176. * @return {Boolean}true:数字,false:<b>不是</b>数字; 
  177. */  
  178. this.isNum=function(str){ 
  179.     var re=/^[\d]+$/; 
  180.     return re.test(str); 
  181. this.isNumSpan=function(id){ 
  182.     var val=document.getElementById(id); 
  183.     if(!this.isNum(val.value)){ 
  184.         val.select(); 
  185.         var str="必须是数字;"
  186.         this.appendError(id, str); 
  187.         return false
  188.     }else
  189.         this.remove(id + idExt); 
  190.         return true
  191.     } 
  192. /**  
  193. * 检查数值是否在给定范围以内,为空,不做检查<br>  
  194.  
  195. * @param {} 
  196. * str_num  
  197. * @param {} 
  198. * small 应该大于或者等于的数值(此值为空时,只检查不能大于最大值)  
  199. * @param {} 
  200. * big 应该小于或者等于的数值(此值为空时,只检查不能小于最小值)  
  201.  
  202. * @return {Boolean}<b>小于最小数值或者大于最大数值</b>数字返回false 否则返回true; 
  203. */  
  204. this.isRangeNum=function(str_num, small, big){ 
  205.     if(!this.isNum(str_num)) // 检查是否为数字  
  206.     return false
  207.     if(small == "" && big == "")  
  208.     throw str_num + "没有定义最大,最小值数字!"
  209.     if(small != ""){ 
  210.         if(str_num < small)  
  211.         return false
  212.     } 
  213.     if(big != ""){ 
  214.         if(str_num > big)  
  215.         return false
  216.     } 
  217.     return true
  218. this.isRangeNumSpan=function(id, small, big){ 
  219.     var val=document.getElementById(id); 
  220.     if(!this.isRangeNum(val.value, small, big)){ 
  221.         val.select(); 
  222.         var str=""
  223.         if(small != ""){ 
  224.             str="应该大于或者等于 " + small; 
  225.         } 
  226.         if(big != ""){ 
  227.             str+=" 应该小于或者等于 " + big; 
  228.         } 
  229.         this.appendError(id, str); 
  230.         return false
  231.     }else
  232.         this.remove(id + idExt); 
  233.         return true
  234.     } 
  235. /**  
  236. * 检查是否为合格字符串(不区分大小写)<br>  
  237. * 是由a-z0-9_组成的字符串  
  238.  
  239. * @param {} 
  240. * str 检查的字符串  
  241. * @param {} 
  242. * idStr 光标定位的字段ID<b>只能接收ID</b>  
  243. * @return {Boolean}<b>不是</b>"a-z0-9_"组成返回false,否则返回true; 
  244. */  
  245. this.isLicit=function(str){ 
  246.     var re=/^[_0-9a-zA-Z]*$/; 
  247.     return re.test(str); 
  248. this.isLicitSpan=function(id){ 
  249.     var val=document.getElementById(id); 
  250.     if(!this.isLicit(val.value)){ 
  251.         val.select(); 
  252.         var str="是由a-z0-9_组成的字符串(不区分大小写);"
  253.         this.appendError(id, str); 
  254.         return false
  255.     }else
  256.         this.remove(id + idExt); 
  257.         return true
  258.     } 
  259. /**  
  260. * 检查二个字符串是否相等  
  261.  
  262. * @param {} 
  263. * str1 第一个字符串  
  264. * @param {} 
  265. * str2 第二个字符串  
  266. * @return {Boolean}字符串不相等返回false,否则返回true; 
  267. */  
  268. this.isEquals=function(str1, str2){ 
  269.     return str1 == str2; 
  270. this.isEqualsSpan=function(id, id1){ 
  271.     var val=document.getElementById(id); 
  272.     var val1=document.getElementById(id1); 
  273.     if(!this.isEquals(val.value, val1.value)){ 
  274.         val.select(); 
  275.         var str="二次输入内容必须一样;"
  276.         this.appendError(id, str); 
  277.         return false
  278.     }else
  279.         this.remove(id + idExt); 
  280.         return true
  281.     } 
  282. /**  
  283. * 检查字符串是否在给定长度范围以内(中文字符以2个字节计算),字符为空,不做检查<br>  
  284.  
  285. * @param {} 
  286. * str 检查的字符  
  287. * @param {} 
  288. * lessLen 应该大于或者等于的长度  
  289. * @param {} 
  290. * moreLen 应该小于或者等于的长度  
  291.  
  292. * @return {Boolean}<b>小于最小长度或者大于最大长度</b>数字返回false; 
  293. */  
  294. this.isRange=function(str, lessLen, moreLen){ 
  295.     var strLen=this.length(str); 
  296.     if(lessLen != ""){ 
  297.     if(strLen < lessLen)  
  298.         return false
  299.     } 
  300.     if(moreLen != ""){ 
  301.         if(strLen > moreLen)  
  302.         return false
  303.     } 
  304.     if(lessLen == "" && moreLen == "")  
  305.     throw "没有定义最大最小长度!"
  306.     return true
  307. this.isRangeSpan=function(id, lessLen, moreLen){ 
  308.     var val=document.getElementById(id); 
  309.     if(!this.isRange(val.value, lessLen, moreLen)){ 
  310.         var str="长度"
  311.         if(lessLen != "")  
  312.             str+="大于或者等于 " + lessLen + ";"
  313.         if(moreLen != "")  
  314.             str+=" 应该小于或者等于 " + moreLen; 
  315.         val.select(); 
  316.         this.appendError(id, str); 
  317.         return false
  318.     }else
  319.         this.remove(id + idExt); 
  320.         return true
  321.     } 
  322. /**  
  323. * 检查字符串是否小于给定长度范围(中文字符以2个字节计算)<br>  
  324.  
  325. * @param {} 
  326. * str 字符串  
  327. * @param {} 
  328. * lessLen 小于或等于长度  
  329.  
  330. * @return {Boolean}<b>小于给定长度</b>数字返回false; 
  331. */  
  332. this.isLess=function(str, lessLen){ 
  333.     return this.isRange(str, lessLen, ""); 
  334. this.isLessSpan=function(id, lessLen){ 
  335.     var val=document.getElementById(id); 
  336.     if(!this.isLess(val.value, lessLen)){ 
  337.         var str="长度大于或者等于 " + lessLen; 
  338.         val.select(); 
  339.         this.appendError(id, str); 
  340.         return false
  341.     }else
  342.         this.remove(id + idExt); 
  343.         return true
  344.     } 
  345. /**  
  346. * 检查字符串是否大于给定长度范围(中文字符以2个字节计算)<br>  
  347.  
  348. * @param {} 
  349. * str 字符串  
  350. * @param {} 
  351. * moreLen 小于或等于长度  
  352.  
  353. * @return {Boolean}<b>大于给定长度</b>数字返回false; 
  354. */  
  355. this.isMore=function(str, moreLen){ 
  356.     return this.isRange(str, '', moreLen); 
  357. this.isMoreSpan=function(id, moreLen){ 
  358.     var val=document.getElementById(id); 
  359.     if(!this.isMore(val.value, moreLen)){ 
  360.         var str="长度应该小于或者等于 " + moreLen; 
  361.         val.select(); 
  362.         this.appendError(id, str); 
  363.         return false
  364.     }else
  365.         this.remove(id + idExt); 
  366.         return true
  367.     } 
  368. /**  
  369. * 检查字符不为空  
  370.  
  371. * @param {} 
  372. * str  
  373. * @return {Boolean}<b>字符为空</b>返回true,否则为false; 
  374. */  
  375. this.isEmpty=function(str){ 
  376.     return str == ''
  377. this.isEmptySpan=function(id){ 
  378.     var val=document.getElementById(id); 
  379.     if(this.isEmpty(val.value)){ 
  380.         var str="不允许为空;"
  381.         val.select(); 
  382.         this.appendError(id, str); 
  383.         return false
  384.     }else
  385.         this.remove(id + idExt); 
  386.         return true
  387.     } 
  388.     } 

具体使用方法见下面案例:

  1. <html>  
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <title>js验证网址,js验证email,js验证数字,js验证密码,js验证字符长度及是否相等,js验证数字范围,js验证是否为空等Javascript验证代码合集(www.phpernote.com)</title>  
  5. <script type="text/javascript" src="function.js"></script>  
  6. <script type="text/javascript">  
  7. function checkForm(){  
  8. var isPass = true;  
  9. //过滤字符串  
  10. if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) {  
  11. isPass = false;  
  12. }  
  13. //检查url  
  14. if(!(checkData.isEmptySpan("isURL") && checkData.isURLSpan('isURL')))  
  15. isPass = false;  
  16. //email  
  17. if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan('isEmail')))  
  18. isPass = false;  
  19. //数字  
  20. if(!(checkData.isNumSpan('isNum')))  
  21. isPass = false;  
  22. //数字大小  
  23. if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))  
  24. isPass = false;  
  25. //密码 (数字,字母,下划线)  
  26. if(!(checkData.isLicitSpan('isLicit')))  
  27. isPass = false;  
  28. //二个字段是否相等  
  29. if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1')))  
  30. isPass = false;  
  31. //字符长度控制  
  32. if(!(checkData.isRangeSpan('isRange',5,10)))  
  33. isPass = false;  
  34. //字符最短控制  
  35. if(!(checkData.isLessSpan('isLess',10)))  
  36. isPass = false;  
  37. //字符最长控制  
  38. if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan('isMore',30)))  
  39. isPass = false;  
  40. //为空控制  
  41. if(!(checkData.isEmptySpan("isEmpty")))  
  42. isPass = false;  
  43. return isPass;  
  44. }  
  45. </script>  
  46. </head>  
  47. <body>  
  48. <form action="index.jsp" method="post" onsubmit="return checkForm();">  
  49. <table>  
  50. <tbody>  
  51. <tr>  
  52. <td>字符过滤:<input type="text" id="filterStr" name="filterStr"></td>  
  53. <td>链接:<input type="text" id="isURL" name="isURL"></td>  
  54. </tr>  
  55. <tr>  
  56. <td>邮件:<input type="text" id="isEmail" name="isEmail"></td>  
  57. <td>数字:<input type="text" id="isNum" name="isNum"></td>  
  58. </tr>  
  59. <tr>  
  60. <td>数字范围:<input type="text" id="isRangeNum" name="isRangeNum"></td>  
  61. <td>a-zA-Z0-9_<input type="text" id="isLicit" name="isLicit"></td>  
  62. </tr>  
  63. <tr>  
  64. <td>判断相等:<input type="text" id="isEquals" name="isEquals"></td>  
  65. <td><input type="text" id="isEquals1" name="isEquals1"></td>  
  66. </tr>  
  67. <tr>  
  68. <td>长度控制:<input type="text" id="isRange" name="isRange"></td>  
  69. <td>长度大于控制:<input type="text" id="isLess" name="isLess"></td>  
  70. </tr>  
  71. <tr>  
  72. <td>长度小于控制:<input type="text" id="isMore" name="isMore"></td>  
  73. <td>是否为空:<input type="text" id="isEmpty" name="isEmpty"></td>  
  74. </tr>  
  75. <tr>  
  76. <td><input type="submit" name="submit" value="提交数据"></td>  
  77. </tr>  
  78. </tbody>  
  79. </table>  
  80. </form>  
  81. </body>  
  82. </html> 

转载请注明:代码家园 » js验证网址常见验证代码合集

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)