設為首頁收藏本站
開啟輔助訪問 切換到寬版
返回列表 發新帖
查看: 10799|回復: 0
打印 上一主題 下一主題

[JavaScript] 表單驗證方法大全 - 用於判斷與驗查資料正確性

[複製鏈接]
跳轉到指定樓層
1#
發表於 2013-9-12 15:14:59 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
JAVASCRIPT驗證表單方法大全，可用來驗查資料的正確性

0. js驗證radio是否選擇
  1. <script language="javascript">
  2. function checkform(obj)
  3. {
  4. for(i=0;i<obj.oo.length;i++)
  5.           if(obj.oo.checked==true)return true;
  6. alert("請選擇")
  7. return false;        
  8. }
  9. </script>
  10. <form id="form1" name="form1" method="post"action=""    >
  11.     <input type="radio" name="oo"value="radiobutton" />
  12.     <input type="radio" name="oo"value="radiobutton" />
  13.     <input type="submit" name="Submit"value="提交" />
  14. </form>
複製代碼
1.長度限制
  1. <script>
  2. function test()
  3. {
  4. if(document.a.b.value.length>50)
  5. {
  6. alert("不能超過50個字元！");
  7. document.a.b.focus();
  8. return false;
  9. }
  10. }
  11. </script>
  12. <form name=a >
  13. <textarea name="b" cols="40" wrap="VIRTUAL"rows="6"></textarea>
  14. <input type="submit" name="Submit"value="check">
  15. </form>
複製代碼
2. 只能是漢字
  1. <input /oblog/value.replace(/[^\u4E00-\u9FA5]/g,'')">
複製代碼
3. 只能是英文
  1. <script language=javascript>
  2. function onlyEng()
  3. {
  4. if(!(event.keyCode>=65&&event.keyCode<=90))
  5. event.returnvalue=false;
  6. }
  7. </script>

  9. <input >
複製代碼
4. 只能是數字
  1. <script language=javascript>
  2. function onlyNum()
  3. {
  4. if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
  5. //考慮小鍵盤上的數位鍵
  6. event.returnvalue=false;
  7. }
  8. </script>

  10. <input >
複製代碼
5. 只能是英文字元和數位
  1. <input /oblog/value.replace(/[\W]/g,"'')">
複製代碼
6. 驗證電子郵件格式
  1. <SCRIPT LANGUAGE=javascript RUNAT=Server>
  2. function isEmail(strEmail) {
  3. if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)!= -1)
  4. return true;
  5. else
  6. alert("oh");
  7. }
  8. </SCRIPT>
  9. <input type=text onblur=isEmail(this.value)>
複製代碼
7. 遮罩關鍵字(這裏遮罩***和****)
  1. <script language="javascript1.2">
  2. function test() {
  3. if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf("****") == 0)){
  4. alert("123");
  5. a.b.focus();
  6. return false;}
  7. }
  8. </script>
  9. <form name=a >
  10. <input type=text name=b>
  11. <input type="submit" name="Submit"value="check">
  12. </form>
複製代碼
8. 兩次輸入密碼是否相同
  1. <FORM METHOD=POST ACTION="">
  2. <input type="password" id="input1">
  3. <input type="password" id="input2">
  4. <input type="button" value="test">
  5. </FORM>
  6. <script>
  7. function check()
  8. {
  9. with(document.all){
  10. if(input1.value!=input2.value)
  11. {
  12. alert("false")
  13. input1.value = "";
  14. input2.value = "";
  15. }
  16. else document.forms[0].submit();
  17. }
  18. }
  19. </script>
複製代碼

第二部分

2.1     表單項不能為空
  1. <script      language="javascript">
  2. <!--
  3. function      CheckForm()
  4. {  
  5. if      (document.form.name.value.length     ==      0)      {  
  6. alert("請輸入您姓名!");
  7. document.form.name.focus();
  8. return      false;
  9. }
  10. return      true;
  11. }
  12. -->
  13. </script>
複製代碼
2.2     比較兩個表單項的值是否相同
  1. <script      language="javascript">
  2. <!--
  3. function      CheckForm()
  4. if      (document.form.PWD.value     !=      document.form.PWD_Again.value)     {  
  5. alert("您兩次輸入的密碼不一樣！請重新輸入.");
  6. document.ADDUser.PWD.focus();
  7. return      false;
  8. }
  9. return      true;
  10. }
  11. -->
  12. </script>
複製代碼
2.3     表單項只能為數位和"_",用於電話/銀行帳號驗證上,可擴展到功能變數名稱註冊等
  1. <script      language="javascript">
  2. <!--
  3. function isNumber(String)
  4. {  
  5.   var Letters = "1234567890-";     //可以自己增加可輸入值
  6.   var i;
  7.   var c;
  8.   if(String.charAt(0)=='-')
  9.     return false;
  10.   if(String.charAt(String.length - 1) == '-')
  11.     return false;
  12.   for(i = 0; i < String.length; i ++)
  13.   {  
  14.   c = String.charAt(i);
  15.   if (Letters.indexOf(c) < 0)
  16.     return false;
  17.   }
  18.   return true;
  19. }

  21. function      CheckForm()
  22. {  
  23. if(!      isNumber(document.form.TEL.value))     {  
  24. alert("您的電話號碼不合法！");
  25. document.form.TEL.focus();
  26. return      false;
  27. }
  28. return      true;
  29. }
  30. -->
  31. </script>
複製代碼
2.4     表單項輸入數值/長度限定
  1. <script      language="javascript">
  2. <!--
  3. function      CheckForm()  
  4. {  
  5. if      (document.form.count.value     >      100     ||      document.form.count.value     <      1)
  6. {  
  7. alert("輸入數值不能小於零大於100!");
  8. document.form.count.focus();
  9. return      false;
  10. }
  11. if      (document.form.MESSAGE.value.length<10)
  12. {  
  13. alert("輸入文字小於10!");
  14. document.form.MESSAGE.focus();
  15. return      false;
  16. }
  17. return      true;
  18. }
  19. //-->
  20. </script>
複製代碼
2.5     中文/英文/數位/郵件位址合法性判斷
  1. <SCRIPT      LANGUAGE="javascript">
  2. <!--

  4. function     isEnglish(name)      //英文值檢測
  5. {  
  6. if(name.length      ==     0)
  7. return      false;
  8. for(i      =      0;     i      <      name.length;     i++)      {  
  9. if(name.charCodeAt(i)     >      128)
  10. return      false;
  11. }
  12. return      true;
  13. }

  15. function     isChinese(name)      //中文值檢測
  16. {  
  17. if(name.length      ==     0)
  18. return      false;
  19. for(i      =      0;     i      <      name.length;     i++)      {  
  20. if(name.charCodeAt(i)     >      128)
  21. return      true;
  22. }
  23. return      false;
  24. }

  26. function     isMail(name)      //     E-mail值檢測
  27. {  
  28. if(!      isEnglish(name))
  29. return      false;
  30. i      =      name.indexOf("     at      ");
  31. j      =     name      dot      lastIndexOf("     at      ");
  32. if(i      ==      -1)
  33. return      false;
  34. if(i      !=      j)
  35. return      false;
  36. if(i      ==     name      dot      length)
  37. return      false;
  38. return      true;
  39. }

  41. function     isNumber(name)      //數值檢測
  42. {  
  43. if(name.length      ==     0)
  44. return      false;
  45. for(i      =      0;     i      <      name.length;     i++)      {  
  46. if(name.charAt(i)     <      "0"     ||      name.charAt(i)     >      "9")
  47. return      false;
  48. }
  49. return      true;
  50. }

  52. function      CheckForm()
  53. {  
  54. if(!      isMail(form.Email.value))     {  
  55. alert("您的電子郵件不合法！");
  56. form.Email.focus();
  57. return      false;
  58. }
  59. if(!      isEnglish(form.name.value))     {  
  60. alert("英文名不合法！");
  61. form.name.focus();
  62. return      false;
  63. }
  64. if(!      isChinese(form.cnname.value))     {  
  65. alert("中文名不合法！");
  66. form.cnname.focus();
  67. return      false;
  68. }
  69. if(!      isNumber(form.PublicZipCode.value))     {  
  70. alert("郵遞區號不合法！");
  71. form.PublicZipCode.focus();
  72. return      false;
  73. }
  74. return      true;
  75. }
  76. //-->
  77. </SCRIPT>
複製代碼
2.6     限定表單項不能輸入的字元
  1. <script      language="javascript">
  2. <!--

  4. function     contain(str,charset)//      字串包含測試函數
  5. {  
  6. var      i;
  7. for(i=0;i<charset.length;i++)
  8. if(str.indexOf(charset.charAt(i))>=0)
  9. return      true;
  10. return      false;
  11. }

  13. function      CheckForm()
  14. {  
  15. if      ((contain(document.form.NAME.value,     "%\(\)><"))     ||      (contain(document.form.MESSAGE.value,     "%\(\)><")))
  16. {  
  17. alert("輸入了非法字元");
  18. document.form.NAME.focus();
  19. return      false;
  20. }
  21. return      true;
  22. }
  23. //-->
  24. </script>  
複製代碼

函數PACK

1. 檢查一段字串是否全由數位組成      
---------------------------------------
  1. <script language="Javascript"><!--           
  2. function checkNum(str){return str.match(/\D/)==null}           
  3. alert(checkNum("1232142141"))           
  4. alert(checkNum("123214214a1"))           
  5. // --></script>
複製代碼
2. 怎麼判斷是否是字元         
---------------------------------------
  1. if (/[^\x00-\xff]/g.test(s)) alert("含有漢字");         
  2. else alert("全是字元");   
複製代碼
3. 怎麼判斷是否含有漢字        
---------------------------------------
  1. if (escape(str).indexOf("%u")!=-1) alert("含有漢字");         
  2. else alert("全是字元");   
複製代碼
4. 電子郵件格式驗證   
---------------------------------------      
//函數名：chkemail     
//功能介紹：檢查是否為Email Address     
//參數說明：要檢查的字串     
//返回值：0：不是 1：是
  1. function chkemail(a)     
  2. { var i=a.length;     
  3. var temp = a.indexOf('@');     
  4. var tempd = a.indexOf('.');     
  5. if (temp > 1) {     
  6. if ((i-temp) > 3){     
  7. if ((i-tempd)>0){     
  8. return 1;     
  9. }     
  10.    
  11. }     
  12. }     
  13. return 0;     
  14. }     
複製代碼
5. 數位格式驗證   
---------------------------------------      
//函數名：fucCheckNUM     
//功能介紹：檢查是否為數字     
//參數說明：要檢查的數字     
//返回值：1為是數位，0為不是數位
  1. function fucCheckNUM(NUM)     
  2. {     
  3. var i,j,strTemp;     
  4. strTemp="0123456789";     
  5. if ( NUM.length== 0)     
  6. return 0     
  7. for (i=0;i<NUM.length;i++)     
  8. {     
  9. j=strTemp.indexOf(NUM.charAt(i));     
  10. if (j==-1)     
  11. {     
  12. //說明有字元不是數位     
  13. return 0;     
  14. }     
  15. }     
  16. //說明是數字     
  17. return 1;     
  18. }     
複製代碼
6. 電話號碼格式驗證   
---------------------------------------      
//函數名：fucCheckTEL     
//功能介紹：檢查是否為電話號碼     
//參數說明：要檢查的字串     
//返回值：1為是合法，0為不合法
  1. function fucCheckTEL(TEL)     
  2. {     
  3. var i,j,strTemp;     
  4. strTemp="0123456789-()# ";     
  5. for (i=0;i<TEL.length;i++)     
  6. {     
  7. j=strTemp.indexOf(TEL.charAt(i));     
  8. if (j==-1)     
  9. {     
  10. //說明有字元不合法     
  11. return 0;     
  12. }     
  13. }     
  14. //說明合法     
  15. return 1;     
  16. }   
複製代碼
7. 判斷輸入是否為中文的函數   
---------------------------------------
  1. function ischinese(s){   
  2. var ret=true;   
  3. for(var i=0;i<s.length;i++)   
  4. ret=ret && (s.charCodeAt(i)>=10000);   
  5. return ret;   
  6. }   
複製代碼
8. 綜合的判斷用戶輸入的合法性的函數  
---------------------------------------      
<script language="javascript">  
//限制輸入字元的位元數開始  
//m是用戶輸入，n是要限制的位數
  1. function issmall(m,n)  
  2. {  
  3. if ((m<n) && (m>0))  
  4.       {  
  5.       return(false);  
  6.       }  
  7. else  
  8. {return(true);}  
  9. }  
複製代碼
9. 判斷密碼是否輸入一致  
---------------------------------------
  1. function issame(str1,str2)  
  2. {  
  3. if (str1==str2)  
  4. {return(true);}  
  5. else  
  6. {return(false);}  
  7. }  
複製代碼
10. 判斷用戶名是否為數位字母下滑線
---------------------------------------
  1. function notchinese(str){
  2. var reg=/[^A-Za-z0-9_]/g
  3.         if (reg.test(str)){
  4.         return (false);
  5.         }else{
  6. return(true);        }
  7. }
複製代碼
11. form文本域的通用校驗函數
---------------------------------------      
作用：檢測所有必須非空的input文本，比如姓名，帳號，郵件地址等等。
該校驗現在只針對文本域，如果要針對form裏面的其他域物件，可以改變判斷條件。
使用方法：在要檢測的文本域中加入title文字。文字是在提示資訊，你要提示給用戶的該欄位的中文名。比如要檢測用戶名
html如下<input name="txt_1" title="姓名">,當然，最好用視覺化工具比如dreamweaver什麼的來編輯域。
如果要檢測數位類型資料的話，再把域的id統一為sz.
javascript判斷日期類型比較麻煩，所以就沒有做日期類型校驗的程式了
  1. < form>

  3. function dovalidate()
  4. {
  5. fm=document.forms[0] //只檢測一個form,如果是多個可以改變判斷條件
  6.         for(i=0;i<fm.length;i++)
  7.         {  
  8.         //檢測判斷條件，根據類型不同可以修改
  9.         if(fm.tagName.toUpperCase()=="INPUT"&&fm.type.toUpperCase()=="TEXT" && (fm.title!=""))
  10.    
  11.              if(fm.value="/blog/="")//
  12.              {
  13.             str_warn1=fm.title+"不能為空!";
  14.             alert(str_warn1);
  15.             fm.focus();
  16.              returnfalse;         
  17.              }
  18.              if(fm.id.toUpperCase()=="SZ")//數字校驗
  19.              {
  20.                     if(isNaN(fm.value))
  21.                    { str_warn2=fm.title+"格式不對";
  22.                    alert(str_warn2);
  23.                    fm.focus();
  24.                     return false;
  25.                     }
  26.             }
  27.         }
  28.         return true;
  29. }
複製代碼

表單提交驗證類


2.1 表單項不能為空
  1. <script language="javascript">
  2. <!--
  3. function CheckForm()
  4. {
  5. if (document.form.name.value.length == 0) {
  6. alert("請輸入您姓名!");
  7. document.form.name.focus();
  8. return false;
  9. }
  10. return true;
  11. }
  12. -->
  13. </script>
複製代碼
2.2 比較兩個表單項的值是否相同
  1. <script language="javascript">
  2. <!--
  3. function CheckForm()
  4. if (document.form.PWD.value != document.form.PWD_Again.value) {
  5. alert("您兩次輸入的密碼不一樣！請重新輸入.");
  6. document.ADDUser.PWD.focus();
  7. return false;
  8. }
  9. return true;
  10. }
  11. -->
  12. </script>
複製代碼
2.3 表單項只能為數位和"_",用於電話/銀行帳號驗證上,可擴展到功能變數名稱註冊等
  1. <script language="javascript">
  2. <!--
  3. function isNumber(String)
  4. {
  5. var Letters = "1234567890-"; //可以自己增加可輸入值
  6. var i;
  7. var c;
  8. if(String.charAt( 0 )=='-')
  9. return false;
  10. if( String.charAt( String.length - 1 ) == '-' )
  11. return false;
  12. for( i = 0; i < String.length; i ++ )
  13. {
  14. c = String.charAt( i );
  15. if (Letters.indexOf( c ) < 0)
  16. return false;
  17. }
  18. return true;
  19. }
  20. function CheckForm()
  21. {
  22. if(! isNumber(document.form.TEL.value)) {
  23. alert("您的電話號碼不合法！");
  24. document.form.TEL.focus();
  25. return false;
  26. }
  27. return true;
  28. }
  29. -->
  30. </script>
複製代碼
2.4 表單項輸入數值/長度限定
  1. <script language="javascript">
  2. <!--
  3. function CheckForm()
  4. {
  5. if (document.form.count.value > 100 || document.form.count.value < 1)
  6. {
  7. alert("輸入數值不能小於零大於100!");
  8. document.form.count.focus();
  9. return false;
  10. }
  11. if (document.form.MESSAGE.value.length<10)
  12. {
  13. alert("輸入文字小於10!");
  14. document.form.MESSAGE.focus();
  15. return false;
  16. }
  17. return true;
  18. }
  19. //-->
  20. </script>
複製代碼
2.5 中文/英文/數位/郵件位址合法性判斷
  1. <SCRIPT LANGUAGE="javascript">
  2. <!--

  4. function isEnglish(name) //英文值檢測
  5. {
  6. if(name.length == 0)
  7. return false;
  8. for(i = 0; i < name.length; i++) {
  9. if(name.charCodeAt(i) > 128)
  10. return false;
  11. }
  12. return true;
  13. }

  15. function isChinese(name) //中文值檢測
  16. {
  17. if(name.length == 0)
  18. return false;
  19. for(i = 0; i < name.length; i++) {
  20. if(name.charCodeAt(i) > 128)
  21. return true;
  22. }
  23. return false;
  24. }

  26. function isMail(name) // E-mail值檢測
  27. {
  28. if(! isEnglish(name))
  29. return false;
  30. i = name.indexOf(" at ");
  31. j = name dot lastIndexOf(" at ");
  32. if(i == -1)
  33. return false;
  34. if(i != j)
  35. return false;
  36. if(i == name dot length)
  37. return false;
  38. return true;
  39. }

  41. function isNumber(name) //數值檢測
  42. {
  43. if(name.length == 0)
  44. return false;
  45. for(i = 0; i < name.length; i++) {
  46. if(name.charAt(i) < "0" || name.charAt(i) > "9")
  47. return false;
  48. }
  49. return true;
  50. }

  52. function CheckForm()
  53. {
  54. if(! isMail(form.Email.value)) {
  55. alert("您的電子郵件不合法！");
  56. form.Email.focus();
  57. return false;
  58. }
  59. if(! isEnglish(form.name.value)) {
  60. alert("英文名不合法！");
  61. form.name.focus();
  62. return false;
  63. }
  64. if(! isChinese(form.cnname.value)) {
  65. alert("中文名不合法！");
  66. form.cnname.focus();
  67. return false;
  68. }
  69. if(! isNumber(form.PublicZipCode.value)) {
  70. alert("郵遞區號不合法！");
  71. form.PublicZipCode.focus();
  72. return false;
  73. }
  74. return true;
  75. }
  76. //-->
  77. </SCRIPT>
複製代碼
2.6 限定表單項不能輸入的字元
  1. <script language="javascript">
  2. <!--

  4. function contain(str,charset)// 字串包含測試函數
  5. {
  6. var i;
  7. for(i=0;i<charset.length;i++)
  8. if(str.indexOf(charset.charAt(i))>=0)
  9. return true;
  10. return false;
  11. }

  13. function CheckForm()
  14. {
  15. if ((contain(document.form.NAME.value, "%\(\)><")) ||(contain(document.form.MESSAGE.value, "%\(\)><")))
  16. {
  17. alert("輸入了非法字元");
  18. document.form.NAME.focus();
  19. return false;
  20. }
  21. return true;
  22. }
  23. //-->
  24. </script>
複製代碼
回復

使用道具 舉報

返回列表 發新帖
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

本論壇為非營利之網路平台，所有文章內容均為網友自行發表，不代表論壇立場！若涉及侵權、違法等情事，請告知版主處理。


Page Rank Check

廣告刊登  |   交換連結  |   贊助我們  |   服務條款  |   免責聲明  |   客服中心  |   中央分站

手機版|中央論壇

GMT+8, 2026-9-25 20:27 , Processed in 0.040117 second(s), 15 queries .

Powered by Discuz!

© 2005-2015 Copyrights. Set by YIDAS

快速回復 返回頂部 返回列表