1 手機(jī)號(hào)驗(yàn)證

<input type="tel" id="phone" name="phone" placeholder="請(qǐng)輸入聯(lián)系電話" maxlength="11" οnkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" ><script> function checkPhone(phone){var regu = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|(^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$)/;if(!(regu.test(phone))){ return true; } else{return false;}}$("#phone").blur(function(){ //手機(jī)驗(yàn)證var tel=$(this)[0];if(tel.value.length!=11){console.log("請(qǐng)輸入正確的手機(jī)號(hào)");//增加錯(cuò)誤提示$('[name="phone"]').focus();return ;}if(tel.value.length==11){if(checkPhone(tel.value)){console.log("請(qǐng)?zhí)顚?xiě)有效的11位手機(jī)號(hào)碼");//錯(cuò)誤提示$('[name="phone"]').focus();return ;}}}); </script>

2 ?email驗(yàn)證

<input type="email" id="email" name="email" placeholder="請(qǐng)輸入電郵地址" οnblur="testEmail($(this).val())"> <script> function testEmail(str){var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if(!reg.test(str)){console.log("請(qǐng)輸入正確的電郵地址");//錯(cuò)誤提示$('[name="email"]').focus();return ;} }</script>

?3 身份證號(hào)驗(yàn)證

2 <input type="text" maxlength="18" class="input" placeholder="請(qǐng)輸入您的身份證" id="icCode" name="icCode"
　　　　οnblur="validIdCard($(this).val())" οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
　　　　οnpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" οncοntextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" οncοntextmenu="return false;" /> 3 4 <script> 5 function validIdCard(icCode) { 6 if($.trim($('[name="icCode"]').val()) == '') { 7 console.log("身份證號(hào)碼不能為空！"); 8 $('[name="icCode"]').focus(); 9 return; 10 } else if(!validIcCode($.trim($('[name="icCode"]').val()))) { 11 $('[name="icCode"]').focus(); 12 return; 13 } 14 15 } 16 17 function validIcCode(iIdNo) { 18 var aCity = { 19 11: "北京", 20 12: "天津", 21 13: "河北", 22 14: "山西", 23 15: "內(nèi)蒙古", 24 21: "遼寧", 25 22: "吉林", 26 23: "黑龍江", 27 31: "上海", 28 32: "江蘇", 29 33: "浙江", 30 34: "安徽", 31 35: "福建", 32 36: "江西", 33 37: "山東", 34 41: "河南", 35 42: "湖北", 36 43: "湖南", 37 44: "廣東", 38 45: "廣西", 39 46: "海南", 40 50: "重慶", 41 51: "四川", 42 52: "貴州", 43 53: "云南", 44 54: "西藏", 45 61: "陜西", 46 62: "甘肅", 47 63: "青海", 48 64: "寧夏", 49 65: "新疆", 50 71: "臺(tái)灣", 51 81: "香港", 52 82: "澳門(mén)", 53 91: "國(guó)外" 54 }; 55 var iSum = 0; 56 var info = ""; 57 58 if(!/^\d{17}(\d|x)$/i.test(iIdNo)) { 59 console.log("你輸入的身份證長(zhǎng)度或格式錯(cuò)誤"); 60 return false; 61 } 62 63 iIdNo = iIdNo.replace(/x$/i, "a"); 64 65 if(aCity[parseInt(iIdNo.substr(0, 2))] == null) { 66 console.log("你的身份證地區(qū)非法"); 67 return false; 68 } 69 70 sBirthday = iIdNo.substr(6, 4) + "-" + Number(iIdNo.substr(10, 2)) + "-" + Number(iIdNo.substr(12, 2)); 71 72 var d = new Date(sBirthday.replace(/-/g, "/")); 73 74 if(sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) { 75 console.log("身份證上的出生日期非法"); 76 return false; 77 } 78 79 for(var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(iIdNo.charAt(17 - i), 11); 80 81 if(iSum % 11 != 1) { 82 console.log("你輸入的身份證號(hào)非法"); 83 return false; 84 } else { 85 return true; 86 } 87 } 88 </script>

4 非空驗(yàn)證

1 function isNullValue(val) { 2 if (val == '') {return true;} 3 var regu = "^[ ]+$|^[ ]+$"; 4 var re = new RegExp(regu); 5 if (re.test(val) == true) {return true;} 6 return false; 7 }

?5 url驗(yàn)證

1 <input name="www" type="text" id="www" size="20" maxlength="70" οnblur="checkform1();">2 3 <script language="javascript">4 function isURL(str) {????5 return !!str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);??6 }7 8 function checkform1() {9 var www = $('#www').val(); 10 if(www == "") { 11 console.log("請(qǐng)輸入個(gè)人主頁(yè)地址！"); 12 $('#www').val('').focus(); 13 return; 14 } else { 15 if(!isURL(www)) { 16 console.log("您輸入的個(gè)人主頁(yè)地址不合法！"); 17 $('#www').val('').focus(); 18 return; 19 } 20 } 21 22 } 23 </script>

?

??6 日期格式及開(kāi)始時(shí)間不得大于結(jié)束時(shí)間驗(yàn)證

<input type="text" name="beginTime" id="beginTime" value="" οnchange="changeDate(this)"/> <input type="text" name="engTime" id="engTime" value="" οnchange="changeDate(this)" /><script language="javascript">function RQcheck(RQ) {var date = RQ;var result = date.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);if (result == null)return false;var d = new Date(result[1], result[3] - 1, result[4]);return (d.getFullYear() == result[1] && (d.getMonth() + 1) == result[3] && d.getDate() == result[4]);} function CheckAdd(input) {//驗(yàn)證日期格式,假定規(guī)定的日期格式是YYYY-MM-DDvar ret = true;if (!RQcheck($(input).val())) {console.log("請(qǐng)輸入正確的日期格式");$(input).focus();return false;}return ret;}function getDate(date){//格式化日期格式,特別是月日小于10的補(bǔ)零var month=(date.getMonth()+1)>9?(date.getMonth()+1):('0'+(date.getMonth()+1));var IDate=date.getDate()>9?date.getDate():('0'+date.getDate());var strDate=date.getFullYear()+'-'+month+'-'+IDate;return strDate;}function changeDate(input){//結(jié)束日期必須大于等于開(kāi)始日期var thisDate=getDate(new Date($(input).val()));var beginTime=getDate(new Date($('#beginTime').val()));var engTime=getDate(new Date($('#engTime').val()));if(!CheckAdd(input)){$(input).val('').focus()}else if(beginTime>engTime){console.log('填寫(xiě)的動(dòng)工日期必須大于當(dāng)前日期.')$(input).val('').focus()}else{$(input).val(thisDate)}} </script>

?7 英文,數(shù)字,中文驗(yàn)證

只能輸入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> <br /> <br /> 只能輸入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')"onpaste="return false"oncontextmenu="return false" /> 無(wú)法粘貼，右鍵不會(huì)彈出粘貼菜單 <br /> <br /> 只能輸入數(shù)字： <input onkeyup="this.value=this.value.replace(/\D/g,'')"onafterpaste="this.value=this.value.replace(/\D/g,'')"> <br /> <br /> 只能輸入數(shù)字，小數(shù)點(diǎn)： <input name="price" type="text"onkeyup="value=value.replace(/[^\d\.]/g,'')"> <br /> <br /> 只能輸入數(shù)字，小數(shù)點(diǎn)，下劃線： <input name="price" type="text"onkeyup="value=value.replace(/[^\d\._]/g,'')"> <br /> <br /> 只能輸入英文和數(shù)字： <input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br /> <br /> 只能輸入漢字： <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"> <br /> <br /> 禁止輸入法輸入： <input type="text" style="ime-mode: disabled"> 無(wú)法切換輸入法 <br /> <br /> 只能輸入中文、英文、數(shù)字、@符號(hào)和.符號(hào)： <input type="text"onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')"> <br /> <br /> 不能為空： <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能為空!')">

8 數(shù)值型驗(yàn)證

<input type="text" name="" id="" value="" maxlength="10" onblur="validationNum(this)" onkeyup="value=value.replace(/[^\d\.-]/g,'')"/><script language="javascript">function validationNum(input) {var val = $(input).val(); // var regu = /^\-?[1-9]\d*$/g ;//只能輸入正負(fù)整數(shù) // var regu = /^(\-?0\.[0-9]*)$|(\-?[1-9][0-9]*\.?[0-9]*$)|^0$/g ;//可輸入正負(fù)數(shù)(包括有小數(shù)的,0)var regu = /^[1-9]\d*$/g; //只能輸入正整數(shù)if(val != "") {if(!regu.test(val)) {console.log('只能輸入數(shù)值,正數(shù)的首位不能為0,負(fù)數(shù)的數(shù)值部分首位不能為0');$(input).val('');}}console.log(val.length)} </script>

?9 銀行卡號(hào)驗(yàn)證

<input type="text" name="bankNum" id="bankNum" value="" onblur="CheckBankNo($(this).val())" onkeyup="value=value.replace(/[^\d]/g,'')"/><script language="javascript"> //銀行卡號(hào)Luhn校驗(yàn)算法 //luhn校驗(yàn)規(guī)則：16位銀行卡號(hào)（19位通用）: //1.將未帶校驗(yàn)位的 15（或18）位卡號(hào)從右依次編號(hào) 1 到 15（18），位于奇數(shù)位號(hào)上的數(shù)字乘以 2。 //2.將奇位乘積的個(gè)十位全部相加，再加上所有偶數(shù)位上的數(shù)字。 //3.將加法和加上校驗(yàn)位能被 10 整除。 //bankno為銀行卡號(hào)function luhnCheck(bankno){var lastNum=bankno.substr(bankno.length-1,1);//取出最后一位（與luhn進(jìn)行比較）var first15Num=bankno.substr(0,bankno.length-1);//前15或18位var newArr=new Array();for(var i=first15Num.length-1;i>-1;i--){ //前15或18位倒序存進(jìn)數(shù)組 newArr.push(first15Num.substr(i,1));}var arrJiShu=new Array(); //奇數(shù)位*2的積 <9var arrJiShu2=new Array(); //奇數(shù)位*2的積 >9var arrOuShu=new Array(); //偶數(shù)位數(shù)組for(var j=0;j<newArr.length;j++){if((j+1)%2==1){//奇數(shù)位if(parseInt(newArr[j])*2<9)arrJiShu.push(parseInt(newArr[j])*2);elsearrJiShu2.push(parseInt(newArr[j])*2);}else //偶數(shù)位 arrOuShu.push(newArr[j]);}var jishu_child1=new Array();//奇數(shù)位*2 >9 的分割之后的數(shù)組個(gè)位數(shù)var jishu_child2=new Array();//奇數(shù)位*2 >9 的分割之后的數(shù)組十位數(shù)for(var h=0;h<arrJiShu2.length;h++){jishu_child1.push(parseInt(arrJiShu2[h])%10);jishu_child2.push(parseInt(arrJiShu2[h])/10); } var sumJiShu=0; //奇數(shù)位*2 < 9 的數(shù)組之和var sumOuShu=0; //偶數(shù)位數(shù)組之和var sumJiShuChild1=0; //奇數(shù)位*2 >9 的分割之后的數(shù)組個(gè)位數(shù)之和var sumJiShuChild2=0; //奇數(shù)位*2 >9 的分割之后的數(shù)組十位數(shù)之和var sumTotal=0;for(var m=0;m<arrJiShu.length;m++){sumJiShu=sumJiShu+parseInt(arrJiShu[m]);}for(var n=0;n<arrOuShu.length;n++){sumOuShu=sumOuShu+parseInt(arrOuShu[n]);}for(var p=0;p<jishu_child1.length;p++){sumJiShuChild1=sumJiShuChild1+parseInt(jishu_child1[p]);sumJiShuChild2=sumJiShuChild2+parseInt(jishu_child2[p]);} //計(jì)算總和 sumTotal=parseInt(sumJiShu)+parseInt(sumOuShu)+parseInt(sumJiShuChild1)+parseInt(sumJiShuChild2);//計(jì)算luhn值var k= parseInt(sumTotal)%10==0?10:parseInt(sumTotal)%10; var luhn= 10-k;if(lastNum==luhn){console.log("驗(yàn)證通過(guò)");return true;}else{console.log("銀行卡號(hào)必須符合luhn校驗(yàn)");return false;} }//檢查銀行卡號(hào)function CheckBankNo(bankno) {var bankno = bankno.replace(/\s/g,'');if(bankno == "") {console.log("請(qǐng)?zhí)顚?xiě)銀行卡號(hào)");return false;}if(bankno.length < 16 || bankno.length > 19) {console.log("銀行卡號(hào)長(zhǎng)度必須在16到19之間");return false;}var num = /^\d*$/;//全數(shù)字if(!num.exec(bankno)) {console.log("銀行卡號(hào)必須全為數(shù)字");return false;}//開(kāi)頭6位var strBin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";if(strBin.indexOf(bankno.substring(0, 2)) == -1) {console.log("銀行卡號(hào)開(kāi)頭6位不符合規(guī)范");return false;}//Luhn校驗(yàn)if(!luhnCheck(bankno)){return false;}return true;} </script>

?10 file類型的必填驗(yàn)證

file 類型的value是只讀屬性,不能由js去控制,在實(shí)際項(xiàng)目中需要編輯,上傳預(yù)覽, 但是后臺(tái)傳值過(guò)來(lái)value獲取一直都是空

解決: 在input上規(guī)定自定義屬性,用自定義去判斷是不是已經(jīng)有了圖

題外 ?錯(cuò)誤信息提示

?

<style> .toast-box {position: absolute;z-index: 9999;max-width: 90%;top: 48%;left: 50%; }.popover-success {opacity: 1;display: block;text-align: center;font-size:1.2rem;color: #fff;padding: 0.7em 1em;white-space: nowrap;box-sizing: border-box;border-radius: 6px;background-color: rgba(0, 0, 0, 0.6);line-height: 1.6;letter-spacing: 2px;-webkit-transform: translateX(-50%) scale(1);-ms-transform: translateX(-50%) scale(1);transform: translateX(-50%) scale(1);-webkit-transition: .2s ease;transition: .2s ease; } </style> function toast_1(message) {var toastBox = "<div class='toast-box'><span class='popover-success'>" + message + "</span></div>";$('body').append(toastBox); $(".toast-box").fadeOut(3000,function(){$(".toast-box").remove(); }); }

?

?

?

很多都是網(wǎng)上找到的加之前用到的,如果有任何侵權(quán)麻煩聯(lián)系我,主要是整理,謝謝~~

轉(zhuǎn)載于:https://www.cnblogs.com/xcdl/p/7412870.html

總結(jié)

以上是生活随笔為你收集整理的input的表单验证(不断更新中~~)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。