JS表單驗(yàn)證方法實(shí)例小結(jié)【電話、身份證號(hào)、Email、中文、特殊字符、身份證號(hào)等】
更新時(shí)間：2017年02月14日 08:49:25 作者：風(fēng)起從容
這篇文章主要介紹了JS表單驗(yàn)證方法,結(jié)合實(shí)例形式總結(jié)分析了常用的表單驗(yàn)證技巧,包括電話、身份證號(hào)、Email、中文、特殊字符、身份證號(hào)等驗(yàn)證方法,需要的朋友可以參考下
本文實(shí)例總結(jié)了JS表單驗(yàn)證方法。分享給大家供大家參考，具體如下：
回回寫表單,回回要寫不同的檢查JS,很麻煩,后來寫了通用的檢查函數(shù),很粗糙,但比較實(shí)用,以后再好好改改:
包含頁(yè): Check-Form.js
代碼如下:
//規(guī)則檢查排序
function RegCheck(objs)
{
var str = objs.checktype;
switch (str)
{
case "cn" : //要檢查的表單控件的輸入類型必須為中文
return CnWordRegCheck(objs);
break;
case "idnum" :
return IdCardRegCheck(objs); //要檢查的表單控件的輸入類型必須為身份證號(hào)
break;
case "num" : //要檢查的表單控件的輸入類型必須為數(shù)字
return NumRegCheck(objs);
break;
case "mail" : //要檢查的表單控件的輸入類型必須為EMAIL
return EmailRegCheck(objs);
break;
case "txt" : //要檢查的表單控件的輸入類型必須為字符串
return SpecialWordRegCheck(objs);
break;
case "notes" :
return true; //要檢查的表單控件的輸入類型必須為什么都可以
break;
}
}
//************************************************
//檢查電話號(hào)碼
function NumRegCheck(obj)
{
var uplimit = obj.checkrule.split(",")[0];
var downlimit = obj.checkrule.split(",")[1];
var reg = "";
if (downlimit == null)
{
reg = eval_r("/^[0-9]{"+uplimit+"}$/");
}
else
{
reg = eval_r("/^[0-9]{"+uplimit+","+downlimit+"}$/");
}
var str = obj.value;
var flag = reg.test(str);
return flag;
}
//************************************************
//檢查身份證號(hào)
function IdCardRegCheck(obj)
{
var str = obj.value;
var reg = /^([0-9]{15}|[0-9]{18})$/;
var flag = reg.test(str);
return flag;
}
//************************************************
//檢查EMAIL
function EmailRegCheck(obj)
{
var str = obj.value;
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
var flag = reg.test(str);
return flag;
}
//***************************************
//檢查中文輸入
function CnWordRegCheck(obj)
{
var str = obj.value;
var reg=/^[\u4e00-\u9fa5](\s*[\u4e00-\u9fa5])*$/;
var flag = reg.test(str);
//alert(flag);
return flag;
}
//***************************************
//檢查特殊字符
function SpecialWordRegCheck(obj)
{
var reg= /[(\/)(<)(>)]/g">\\)(')(")(<)(>)]/g;
var str = obj.value;
var flag= reg.test(str);
flag = !flag;
return flag;
}
//************************************************
//檢查主引導(dǎo)函數(shù)
function CheckForm(obj)
{
var myform = eval_r("document."+obj.name);
for (i=0;i<myform.elements.length;i++)
{
var formvalue = myform.elements[i].value;
//內(nèi)容非空檢查,長(zhǎng)度檢查
if ((myform.elements[i].value == "")||(myform.elements[i].value.length>myform.elements[i].maxlength))
{
alert("您忘了填寫"+myform.elements[i].cnname+"!"+"或者您填寫的信息不符合規(guī)范!");
myform.elements[i].focus();
return false;
break;
}
if (myform.elements[i].value == 0)
{
alert("您忘了選擇"+myform.elements[i].cnname+"!");
myform.elements[i].focus();
return false;
break;
}
//數(shù)據(jù)規(guī)范化檢查
var myobj = myform.elements[i];
//alert(myobj.checktype);
//break;
if (!RegCheck(myobj))
{
alert(myobj.cnname+"輸入有誤,請(qǐng)按填寫要求填寫!");
myobj.focus();
return false;
break;
}
}
}
附：js身份證號(hào)碼嚴(yán)格驗(yàn)證
<script>
function checkIdcard(idcard){
var Errors=new Array(
"驗(yàn)證通過!",
"身份證號(hào)碼位數(shù)不對(duì)!",
"身份證號(hào)碼出生日期超出范圍或含有非法字符!",
"身份證號(hào)碼校驗(yàn)錯(cuò)誤!",
"身份證地區(qū)非法!"
);
var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"內(nèi)蒙古",21:"遼寧",22:"吉林",23:"黑龍江",31:"上海",32:"江蘇",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",42:"湖北",43:"湖南",44:"廣東",45:"廣西",46:"海南",50:"重慶",51:"四川",52:"貴州",53:"云南",54:"西藏",61:"陜西",62:"甘肅",63:"青海",64:"寧夏",65:"新疆",71:"臺(tái)灣",81:"香港",82:"澳門",91:"國(guó)外"}
var idcard,Y,JYM;
var S,M;
var idcard_array = new Array();
idcard_array = idcard.split("");
//地區(qū)檢驗(yàn)
if(area[parseInt(idcard.substr(0,2))]==null) return Errors[4];
//身份號(hào)碼位數(shù)及格式檢驗(yàn)
switch(idcard.length){
case 15:
if ( (parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//測(cè)試出生日期的合法性
} else {
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//測(cè)試出生日期的合法性
}
if(ereg.test(idcard)) return Errors[0];
else return Errors[2];
break;
case 18:
//18位身份號(hào)碼檢測(cè)
//出生日期的合法性檢查
//閏年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))
//平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))
if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//閏年出生日期的合法性正則表達(dá)式
} else {
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正則表達(dá)式
}
if(ereg.test(idcard)){//測(cè)試出生日期的合法性
//計(jì)算校驗(yàn)位
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7
+ (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9
+ (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10
+ (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5
+ (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8
+ (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4
+ (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2
+ parseInt(idcard_array[7]) * 1
+ parseInt(idcard_array[8]) * 6
+ parseInt(idcard_array[9]) * 3 ;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y,1);//判斷校驗(yàn)位
if(M == idcard_array[17]) return Errors[0]; //檢測(cè)ID的校驗(yàn)位
else return Errors[3];
}
else return Errors[2];
break;
default:
return Errors[1];
break;
}
}
alert(checkIdcard("220183198808081610"))
</script>
PS：這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用：
JavaScript正則表達(dá)式在線測(cè)試工具：
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript正則表達(dá)式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js驗(yàn)證身份證號(hào)碼記錄的方法
- JavaScript+Regex 身份證號(hào)碼的正則表達(dá)式及驗(yàn)證詳解
- JS正則表達(dá)式完美實(shí)現(xiàn)身份證校驗(yàn)功能
- JS使用正則表達(dá)式驗(yàn)證身份證號(hào)碼
- JS身份證信息驗(yàn)證正則表達(dá)式
- JS常見簡(jiǎn)單正則表達(dá)式驗(yàn)證功能小結(jié)【手機(jī),地址,企業(yè)稅號(hào),金額,身份證等】
- Javascript使用正則驗(yàn)證身份證號(hào)(簡(jiǎn)單)
- JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JS非Alert實(shí)現(xiàn)網(wǎng)頁(yè)右下角“未讀信息”效果彈窗
這篇文章主要介紹了JS非Alert實(shí)現(xiàn)網(wǎng)頁(yè)右下角“未讀信息”效果彈窗的方法,涉及JavaScript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)彈窗效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
javascript網(wǎng)頁(yè)關(guān)鍵字高亮代碼
非常不錯(cuò)的關(guān)鍵字高亮代碼，用js實(shí)現(xiàn)，這個(gè)方法不錯(cuò)2008-07-07
js中forEach的用法之forEach與for之間的區(qū)別
這篇文章主要介紹了js中forEach的用法之forEach與for之間的區(qū)別，forEach() 調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)，下面更多詳細(xì)介紹需要的小伙伴可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了js模態(tài)對(duì)話框的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
在前端中可以使用多種方法來判斷一個(gè)對(duì)象是否為空,這篇文章主要給大家介紹了關(guān)于前端判斷對(duì)象為空的6種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
拖動(dòng)列寬的表格table標(biāo)題同時(shí)改變td的大小，本文將以實(shí)例演示為大家呈現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js或者css有所幫助2013-04-04
如何使用require.context實(shí)現(xiàn)優(yōu)雅的預(yù)加載
這篇文章主要介紹了使用require.context實(shí)現(xiàn)優(yōu)雅的預(yù)加載?,需要的朋友可以參考下2023-05-05
javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法
這篇文章主要介紹了javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法,涉及javascript操作元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了JS正則匹配與截取操作的實(shí)現(xiàn)技巧,并拓展分析了數(shù)量詞的概念與功能,需要的朋友可以參考下2017-01-01