JS常用表單驗(yàn)證方法總結(jié)
更新時(shí)間：2014年05月22日 10:19:50 作者：
這篇文章主要介紹了JS常用表單驗(yàn)證方法,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表單驗(yàn)證</title>
<script language="javascript">
function check_1(param){//不為空
if(param==""||param==null){return false;}else{return true;}
}
function check_2(param){//長(zhǎng)度限制,字母是10個(gè)，漢字也是10個(gè)
if(param.length>10){return false;}else{return true;}
}
function check_3(param){//只能輸入漢字
var pattern= /^[\u4e00-\u9faf]+$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_4(param){//只能輸入數(shù)字
var pattern= /^[0-9]+$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_5(param){//只能輸入數(shù)字字母下劃線
var pattern= /^[0-9a-zA-z_]+$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_6(param){//郵箱格式驗(yàn)證
var pattern= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_7(param){//網(wǎng)址格式驗(yàn)證
var pattern= /^((https|http|ftp|rtsp|mms)?:\/\/)?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}\.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+\/?)$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check(){
var value=document.getElementById("testValue").value;
var result=check_7(value);//在這里設(shè)置驗(yàn)證函數(shù)的名稱，我寫了check_1~check_7七個(gè)常用的表單驗(yàn)證函數(shù)
if(result==false){
document.getElementById("testValue").style.border="2px solid red";
}else{
//document.getElementById("testValue").style.border="2px solid green";
document.getElementById("testValue").style.border="";
}
}
</script>
</head>
<body>
<div style="text-align: center;padding: 200px 0;">
請(qǐng)輸入： <input id="testValue" name="" class="" type="text" style="width:200px;height:30px;"></input>
<input id="" name="" class="" type="button" value="點(diǎn)擊驗(yàn)證" style="width:70px;height:30px;" onclick="check()"></input>
</div>
</body>
</html>
相關(guān)文章
使用BootStrap實(shí)現(xiàn)懸浮窗口的效果
本文給大家分享使用BootStrap實(shí)現(xiàn)懸浮窗口的效果，神奇的 bootstrap就自帶了這個(gè)功能。所以就用bootstrap的popover插件做了，效果還不錯(cuò)，感興趣的朋友參考下吧2016-12-12
js有效數(shù)字 顯示指定位數(shù)...2007-09-09
js頁(yè)面跳轉(zhuǎn)的問(wèn)題(跳轉(zhuǎn)到父頁(yè)面、最外層頁(yè)面、本頁(yè)面)
js頁(yè)面跳轉(zhuǎn)：本頁(yè)面跳轉(zhuǎn),上一層頁(yè)面跳轉(zhuǎn)，最外層的頁(yè)面跳轉(zhuǎn)，下面為大家大家分享下不同頁(yè)面之家的跳轉(zhuǎn)問(wèn)題，感興趣的朋友可以學(xué)習(xí)下2013-08-08
如何使用pace.js美化你的網(wǎng)站加載進(jìn)度條詳解
Pace.js是一個(gè)非常有意思的js插件,可以自動(dòng)的監(jiān)聽頁(yè)面的加載數(shù)據(jù),并且能夠定制加載條,下面這篇文章主要給大家介紹了關(guān)于使用pace.js如何美化你的網(wǎng)站加載進(jìn)度條的相關(guān)資料,需要的朋友可以參考下2022-02-02
下面小編就為大家?guī)?lái)一篇原生js封裝運(yùn)動(dòng)框架的示例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
本文主要介紹了js獲取當(dāng)前周、上一周、下一周日期的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript冒泡算法原理與實(shí)現(xiàn)方法深入理解
這篇文章主要介紹了JavaScript冒泡算法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript冒泡算法基本原理、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-06-06
js實(shí)現(xiàn)表格拖動(dòng)選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格拖動(dòng)選項(xiàng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)算器案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Map與WeakMap類型在JavaScript中的使用詳解
這篇文章主要介紹了Map與WeakMap類型在JavaScript中的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11