請選擇 進入手機版 | 繼續訪問電腦版
搜索
熱搜: 活動 交友 discuz
查看: 2562|回復: 0

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

[複製鏈接]
發表於 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>

  8. <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>

  9. <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. 遮罩關鍵字(這媥B罩***和****)
  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. }

  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. <!--

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

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

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

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

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

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

  11. function      CheckForm()
  12. {  
  13. if      ((contain(document.form.NAME.value,     "%\(\)><"))     ||      (contain(document.form.MESSAGE.value,     "%\(\)><")))
  14. {  
  15. alert("輸入了非法字元");
  16. document.form.NAME.focus();
  17. return      false;
  18. }
  19. return      true;
  20. }
  21. //-->
  22. </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堶悸漕銗L域物件,可以改變判斷條件。
使用方法:在要檢測的文本域中加入title文字。文字是在提示資訊,你要提示給用戶的該欄位的中文名。比如要檢測用戶名
html如下<input name="txt_1" title="姓名">,當然,最好用視覺化工具比如dreamweaver什麼的來編輯域。
如果要檢測數位類型資料的話,再把域的id統一為sz.
javascript判斷日期類型比較麻煩,所以就沒有做日期類型校驗的程式了
  1. < form>

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


表單提交驗證類


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. <!--

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

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

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

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

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

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

  11. function CheckForm()
  12. {
  13. if ((contain(document.form.NAME.value, "%\(\)><")) ||(contain(document.form.MESSAGE.value, "%\(\)><")))
  14. {
  15. alert("輸入了非法字元");
  16. document.form.NAME.focus();
  17. return false;
  18. }
  19. return true;
  20. }
  21. //-->
  22. </script>
複製代碼
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

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


Page Rank Check

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


手機版|中央論壇

GMT+8, 2019-6-26 06:09 , Processed in 0.064933 second(s), 17 queries .

Powered by Discuz!

© 2005-2015 Copyrights. Set by YIDAS

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