常用的JavaScript驗證功能函數

來源:互聯網
上載者:User

做網站的時候,很多地方都是由表單提交組成的,但是有提交的地方都要有驗證。用戶端驗證最簡單的方法就是使用JS自訂函數。這個文檔包含平時常用的28個驗證函式,還有驗證函式幾種使用方法。

JS驗證函式的調用方法需要注意以下幾點:

  1. 給表單設定 onsubmit="return test()",配合<input type="submit" name="Submit" value="check"> 進行提交。
  2. <input type=text onkeydown="test();"> 當滑鼠按下直接調用函數驗證。
  3. <input type=text onblur="testl(this.value)"> 傳入自己的值進行驗證,test(this) 傳入對象本身進行驗證
  4. <input type="button" value="test" onclick="test()"> // 單擊 Btn 進行驗證,如果通過則用 document.forms[0].submit(); 進行表單提交
  5. <input onClick="return test();" type="submit" name="submit" value=" 提交資訊 "> 使用 submit 進行提交驗證,如果 test 中 return false; 則不提交返 true 提交。
  6. <script type="javascript">....function test(){...return false;...}...</script>
  7. ||與,&&或,!非
  8. 常用事件: onblur 失去焦點,onchange 失去焦點並且內容發生改變,onfocus 元素獲得焦點,onreset 當表單中 RESET 的屬性被激發時,onsubmit 表單被提交時觸發此事件。
  9. 驗證Regex:if(/^[1-9]d*$/.test(str)) 返回真則通過,FALSE通不通過。
  10. document.getElementById("ip").value 訪問ID的值,document.form1.text1.value 通過name訪問
  11. <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不可為空!')"> 執行單條正則驗證例

驗證函式的使用:<input type="text" name="text1" id="text1" onblur="test();" value="" />

字元長度限制
function test(){if(document.form1.text1.value.length>50){alert("不能超過50個字元!");document.form1.text1.focus();return false;}}
只能是英文,字母或數字
function test(){if(!(event.keyCode>=65&&event.keyCode<=90)){alert("只能是英文!");document.form1.text1.focus();}}<input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有錯')"> //字母或數字
只能是數字
function test(){// 考慮小鍵盤上的數字鍵    if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode <= 105))) {alert("只能是數字!");document.form1.text1.focus();}}

或者使用以下方法:

function test(NUM){var i,j,strTemp;strTemp="0123456789";if ( NUM.length== 0) return 0for (i=0; i<NUM.length; i++){j=strTemp.indexOf(NUM.charAt(i));if (j==-1){alert("只能是數字!");return false;}}//說明是數字return true;}
驗證郵箱(正則,函數)
function isEmail(strEmail) {if (strEmail.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/) != -1)return true;elsealert("格式錯誤!");}function isEmail() {if (document.userinfo.useremail.value.charAt(0)=="." ||           document.userinfo.useremail.value.charAt(0)=="@"||      document.userinfo.useremail.value.indexOf('@', 0) == -1 ||document.userinfo.useremail.value.indexOf('.', 0) == -1 ||document.userinfo.useremail.value.lastIndexOf("@")==document.userinfo.useremail.value.length-1 ||document.userinfo.useremail.value.lastIndexOf(".")==document.userinfo.useremail.value.length-1){alert("Email地址格式不正確!");document.userinfo.useremail.focus();return false;}}<input type="text" onblur="isEmail(this.value);" name="text1" />
屏蔽關鍵字(這裡屏蔽***和****)
function test() {if((document.form1.text1.value.indexOf ("***") == 0)||(document.form1.text1.value.indexOf ("****") == 0))    {alert("存在關鍵字");document.form1.text1.focus();return false;}}
比較兩次輸入是否相同
if(document.userinfo.userpassword.value != document.userinfo.userpassword1.value) {document.userinfo.userpassword.focus();document.userinfo.userpassword.value = '';document.userinfo.userpassword1.value = '';alert("兩次輸入的密碼不同,請重新輸入!");return false;}
判斷是否為空白或空格組成
function test(){if(checkspace(document.form1.text1.value))     {document.form1.text1.focus();alert("為空白或包含空格組成!");return false;}}function checkspace(checkstr) {var str = '';for(i = 0; i < checkstr.length; i++)     {str = str + ' ';}return (str == checkstr);}

或者執行單條正則驗證例:

<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不可為空!')"> //執行單條正則驗證例
驗證是否是數字電話,只能是數字和-

正則:d{3}-d{8}|d{4}-d{7}

function istel(elem) {var str=elem.value;var oneDecimal=false;var oneChar=0;str=str.toString( );for (var i=0; i<str.length; i++)     {oneChar=str.charAt(i).charCodeAt(0);if(oneChar==45){ continue; }if(oneChar<48 || oneChar > 57)         {alert("此項只能輸入數字和'-'號.");return false;}}return true;}

或者

function fucCheckTEL(TEL){var i,j,strTemp;strTemp="0123456789-()# ";for (i=0; i<TEL.length; i++){j=strTemp.indexOf(TEL.charAt(i));if (j==-1){alert("此項只能輸入數字和'-'號.");return false;}}//說明合法return true;}

或者

//校正普通電話、傳真號碼:可以“+”開頭,除數字外,可含有“-”function isTel(s){//var patrn=/^[+]{0,1}(d){1,3}[ ]?([-]?(d){1,12})+$/;var patrn=/^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/;if (!patrn.exec(s)) return falsereturn true}

或者如果有以下要求:

  1. 電話號碼由數字、"("、")"和"-"構成
  2. 電話號碼為3到8位
  3. 如果電話號碼中包含有區號,那麼區號為三位或四位
  4. 區號用"("、")"或"-"和其他部分隔開
  5. 行動電話號碼為11或12位,如果為12位,那麼第一位為0
  6. 11位行動電話號碼的第一位和第二位為"13"
  7. 12位行動電話號碼的第二位和第三位為"13"

根據這幾條規則,可以與出以下Regex:(^[0-9]{3,4}-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^([0-9]{3,4})[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)

function PhoneCheck(s) {var str=s;var reg=/(^[0-9]{3,4}-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^([0-9]{3,4})[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/alert(reg.test(str));}<input type="text" name="text1" onblur="istel(this);" />
當opt2為1時檢查num是否是負數 當opt1為1時檢查num是否是小數 返回1是正確的,0是錯誤的
function chknbr(num, opt1, opt2){var i=num.length;var staus;//staus用於記錄.的個數status=0;if ((opt2!=1) && (num.charAt(0)=='-')){alert("You have enter a invalid number.");return 0;}//當最後一位為.時出錯if (num.charAt(i-1)=='.'){alert("You have enter a invalid number.");return 0;}for (j=0; j<i; j++){ if (num.charAt(j)=='.'){status++;} if (status>1){ alert("You have enter a invalid number."); return 0; }         if (num.charAt(j)<'0' || num.charAt(j)>'9' ) {  if (((opt1==0) || (num.charAt(j)!='.')) && (j!=0)){alert("You have enter a invalid number.");return 0;}}}return 1;}
檢查是否數字或字母組成的串
function test(str){var strSource ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";var ch;var i;var temp;for (i=0; i<=(str.length-1); i++){ ch = str.charAt(i);temp = strSource.indexOf(ch);if (temp==-1){alert("格式不正確!");return false;}}    if (strSource.indexOf(ch)==-1){alert("格式不正確!");return false;}else{return true;}}
數字驗證

正整數驗證^[1-9]d*$,負整數驗證^-[1-9]d*$ ,整數^-?[1-9]d*$,非負整數^[1-9]d*|0$,非正正數^-[1-9]d*|0$,浮點數^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$

function test(str){if(/^[1-9]d*$/.test(str)){alert("格式不能!");return false;}else{return true;}}
身份證

正則:d{15}|d{18}

IP地址

正則:d+.d+.d+.d+

郵遞區號

正則:[1-9]d{5}(?!d)

function isPostalCode(s){//var patrn=/^[a-zA-Z0-9]{3,12}$/;var patrn=/^[a-zA-Z0-9 ]{3,12}$/;if (!patrn.exec(s)) return falsereturn true}
QQ號

正則:[1-9][0-9]{4,}

HTML標記

正則:d{3}-d{8}|d{4}-d{7}

是否有效顏色值
function IsColor(color){var temp=color;    if (temp=="") return true;    if (temp.length!=7) return false;    return (temp.search(/\#[a-fA-F0-9]{6}/) != -1);}
是否有效連結
function IsURL(url){var sTemp;var b=true;sTemp=url.substring(0,7);sTemp=sTemp.toUpperCase();    if ((sTemp!="HTTP://")||(url.length<10))    {b=false;}    return b;}
是否有效手機號碼
function IsMobile(_str){var tmp_str = trim(_str);var pattern = /13\d{9}/;    return pattern.test(tmp_str);}

或者

//校正手機號碼:必須以數字開頭,除數字外,可含有“-”function IsMobile(s){var patrn=/^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/;if (!patrn.exec(s)) return falsereturn true}
IP地址和社會安全號碼驗證(正則)
function checkIP(){obj=document.getElementById("ip").value//ip地址//var exp=/^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/;//身份證//var exp=/b(((?!ddd)d+|1dd|2[0-4]d|25[0-5])(b|.)){4}///var exp=/^(d{15}|d{17}[x0-9])///var exp=/^([d]{15}|[d]{18}|[d]{17}[x|X])$/var reg = obj.match(exp);if(reg==null){alert("IP地址不合法!");}else{alert("IP地址合法!");}}
校正登入名稱:只能輸入5-20個以字母開頭、可帶數字、“_”、“.”的字串
function isRegisterUserName(s){var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;if (!patrn.exec(s)) return falsereturn true}
校正使用者姓名:只能輸入1-30個以字母開頭的字串
function isTrueName(s){var patrn=/^[a-zA-Z]{1,30}$/;if (!patrn.exec(s)) return falsereturn true}
校正密碼:只能輸入6-20個字母、數字、底線
function isPasswd(s){var patrn=/^(w){6,20}$/;if (!patrn.exec(s)) return false    return true}
日期時間類

短時間,形如 (13:04:06)

function isTime(str){var a = str.match(/^(d{1,2})(:)?(d{1,2})2(d{1,2})$/);if (a == null) {alert('輸入的參數不是時間格式'); return false;}if (a[1]>24 || a[3]>60 || a[4]>60){ alert("時間格式不對");return false}return true;}

短日期,形如 (2003-12-05)

function strDateTime(str){var r = str.match(/^(d{1,4})(-|/)(d{1,2})2(d{1,2})$/);if(r==null)return false;var d= new Date(r[1], r[3]-1, r[4]);return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);}

長時間,形如 (2003-12-05 13:04:06)

function strDateTime(str){var reg = /^(d{1,4})(-|/)(d{1,2})2(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/;var r = str.match(reg);if(r==null)return false;var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]    &&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);}
判斷字元全部由a-Z或者是A-Z的字字母組成
<input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有錯')"> 
判斷字元由字母和數字,底線,點號組成。且開頭的只能是底線和字母。
<input onblur="if(/^([a-zA-z_]{1})([w]*)$/g.test(this.value))alert('有錯')"> 
表單的值不可為空,不能超過imax字元,不能少於imix字元,輸入為中文判斷
function isNull(elem){//var pattern=/^s+|s+$/;if(elem.replace(/(^s+|s$)/g, "")=="")    {return false;}    else    {return true;}}function imax(elem){if(elem.length>imax)    {return false;}    else    {return true;}}function imix(elem){if(elem.length)    {     return false;}else    {return true;}}function isChinese(elem){var pattern=/[^x00-xff]/g;if(pattern.test(elem))    {//包含中文return false;}    else    {//不包含中文return true;}}

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.