簡單的js表單驗(yàn)證函數(shù)
有些時候，用一些成型的js控件會比較方便，但是又過于龐大和難以維護(hù)（本人的js水平不高）
所以干脆自己寫了一個。至于好不好，靈活不靈活，還請大家指點(diǎn)（先上圖，很難看，請不要介意）：
代碼：
表單驗(yàn)證js代碼
var fv =
{
lang: "zh-cn", //錯誤提示語言
inValidedStr: "=", //初始隨意復(fù)制，使其長度不為0
mail: function(elementID) //驗(yàn)證郵件地址合法,elementID為input文本輸入框的ID
{
if (elementID == null) { return true; }
else
{
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (reg.test(document.getElementById(elementID).value))
{
fv.inValidedStr = fv.inValidedStr.replace(/mail/g, "");
fv.inValidedStr = fv.inValidedStr.replace("=", "");
validMsg(fv.lang, "mail", "mailInfo");
}
else
{
fv.inValidedStr = fv.inValidedStr + "mail";
errorMsg(fv.lang, "mail", "mailInfo");
}
}
},
username: function(elementID) //驗(yàn)證用戶名合法 字母數(shù)字下劃線，長度為6-20
{
if (elementID == null) { return true; }
else
{
var reg = /^[a-zA-Z0-9_]{5,19}$/;
if (reg.test(document.getElementById(elementID).value))
{
fv.inValidedStr = fv.inValidedStr.replace(/username/g, "");
fv.inValidedStr = fv.inValidedStr.replace("=", "");
validMsg(fv.lang, "username", "usernameInfo");
}
else
{
fv.inValidedStr = fv.inValidedStr + "username";
errorMsg(fv.lang, "username", "usernameInfo");
}
}
},
//....可以加其他驗(yàn)證
isValid: function() { return (fv.inValidedStr.length == 0); }
};
//驗(yàn)證成功時的信息 elementID 為信息提示的html單元的id
function validMsg(lang, valueType, elementID)
{
var msgInfo = "";
var isCn = lang == "zh-cn";
switch (valueType)
{
case "mail":
msgInfo = isCn ? " √ 地址正確" : " √ the mail address is valided";
break;
case "username":
msgInfo = isCn ? " √ 成功" : " √ The account valided ";
break;
case "password":
msgInfo = isCn ? " √ 成功" : " √ Valided format!";
break;
//.....對應(yīng)增加其他情況
default:
break;
}
document.getElementById(elementID).innerHTML = msgInfo;
document.getElementById(elementID).style.color = "green";
}
//驗(yàn)證失敗時的信息
function errorMsg(lang, valueType, elementID)
{
var msgInfo = "";
var isCn = lang == "zh-cn";
switch (valueType)
{
case "mail":
msgInfo = isCn ? " × 請輸入正確的郵件地址" : " × The e-mail format is error,plz input right format .eg. abc@def.com.";
break;
case "username":
msgInfo = isCn ? " × 長度6-20個字符，只能為數(shù)字，字母，下劃線組成" : " × The account just ";
break;
case "password":
msgInfo = isCn ? " × 密碼為……" : " × inValided format!";
break;
//....對應(yīng)增加其他情況
default:
break;
}
document.getElementById(elementID).innerHTML = msgInfo;
document.getElementById(elementID).style.color = "red";
}
前臺代碼（aspx頁面）：
前臺aspx頁面代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Common/Js/formValid.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">fv.lang = "en"/*如去掉此行，則默認(rèn)為中文提示*/</script>
<input type="text" name="mail" id="mail" onblur="fv.mail('mail')" /><span id="mailInfo"></span><br />
<asp:TextBox ID="username" runat="server" onblur="fv.username('username')"></asp:TextBox><span id="usernameInfo"></span><br />
<input type="submit" onclick="return fv.isValid()" value="Submit" />
</div>
</form>
</body>
</html>
然后，如果需要其他的驗(yàn)證，則加入即可。相關(guān)正則表達(dá)式
匹配中文字符的正則表達(dá)式： [u4e00-u9fa5]
評注：匹配中文還真是個頭疼的事，有了這個表達(dá)式就好辦了
匹配雙字節(jié)字符(包括漢字在內(nèi))：[^x00-xff]
評注：可以用來計算字符串的長度（一個雙字節(jié)字符長度計2，ASCII字符計1）
匹配空白行的正則表達(dá)式：ns*r
評注：可以用來刪除空白行
匹配HTML標(biāo)記的正則表達(dá)式：< (S*?)[^>]*>.*?|< .*? />
評注：網(wǎng)上流傳的版本太糟糕，上面這個也僅僅能匹配部分，對于復(fù)雜的嵌套標(biāo)記依舊無能為力
匹配首尾空白字符的正則表達(dá)式：^s*|s*$
評注：可以用來刪除行首行尾的空白字符(包括空格、制表符、換頁符等等)，非常有用的表達(dá)式
匹配Email地址的正則表達(dá)式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
評注：表單驗(yàn)證時很實(shí)用
匹配網(wǎng)址URL的正則表達(dá)式：[a-zA-z]+://[^s]*
評注：網(wǎng)上流傳的版本功能很有限，上面這個基本可以滿足需求
匹配帳號是否合法(字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
評注：表單驗(yàn)證時很實(shí)用
匹配國內(nèi)電話號碼：d{3}-d{8}|d{4}-d{7}
評注：匹配形式如 0511-4405222 或 021-87888822
匹配騰訊QQ號：[1-9][0-9]{4,}
評注：騰訊QQ號從10000開始
匹配中國郵政編碼：[1-9]d{5}(?!d)
評注：中國郵政編碼為6位數(shù)字
匹配身份證：d{15}|d{18}
評注：中國的身份證為15位或18位
匹配ip地址：d+.d+.d+.d+
評注：提取ip地址時有用
匹配特定數(shù)字：
^[1-9]d*$ //匹配正整數(shù)
^-[1-9]d*$ //匹配負(fù)整數(shù)
^-?[1-9]d*$ //匹配整數(shù)
^[1-9]d*|0$ //匹配非負(fù)整數(shù)（正整數(shù) + 0）
^-[1-9]d*|0$ //匹配非正整數(shù)（負(fù)整數(shù) + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮點(diǎn)數(shù)
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配負(fù)浮點(diǎn)數(shù)
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮點(diǎn)數(shù)
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非負(fù)浮點(diǎn)數(shù)（正浮點(diǎn)數(shù) + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮點(diǎn)數(shù)（負(fù)浮點(diǎn)數(shù) + 0）
評注：處理大量數(shù)據(jù)時有用，具體應(yīng)用時注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26個英文字母組成的字符串
^[A-Z]+$ //匹配由26個英文字母的大寫組成的字符串
^[a-z]+$ //匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$ //匹配由數(shù)字和26個英文字母組成的字符串
^w+$ //匹配由數(shù)字、26個英文字母或者下劃線組成的字符串
在使用RegularExpressionValidator驗(yàn)證控件時的驗(yàn)證功能及其驗(yàn)證表達(dá)式介紹如下:
只能輸入數(shù)字：“^[0-9]*$”
只能輸入n位的數(shù)字：“^d{n}$”
只能輸入至少n位數(shù)字：“^d{n,}$”
只能輸入m-n位的數(shù)字：“^d{m,n}$”
只能輸入零和非零開頭的數(shù)字：“^(0|[1-9][0-9]*)$”
只能輸入有兩位小數(shù)的正實(shí)數(shù)：“^[0-9]+(.[0-9]{2})?$”
只能輸入有1-3位小數(shù)的正實(shí)數(shù)：“^[0-9]+(.[0-9]{1,3})?$”
只能輸入非零的正整數(shù)：“^+?[1-9][0-9]*$”
只能輸入非零的負(fù)整數(shù)：“^-[1-9][0-9]*$”
只能輸入長度為3的字符：“^.{3}$”
只能輸入由26個英文字母組成的字符串：“^[A-Za-z]+$”
只能輸入由26個大寫英文字母組成的字符串：“^[A-Z]+$”
只能輸入由26個小寫英文字母組成的字符串：“^[a-z]+$”
只能輸入由數(shù)字和26個英文字母組成的字符串：“^[A-Za-z0-9]+$”
只能輸入由數(shù)字、26個英文字母或者下劃線組成的字符串：“^w+$”
驗(yàn)證用戶密碼:“^[a-zA-Z]w{5,17}$”正確格式為：以字母開頭，長度在6-18之間，
只能包含字符、數(shù)字和下劃線。
驗(yàn)證是否含有^%&',;=?前臺aspx頁面代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Common/Js/formValid.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">fv.lang = "en"/*如去掉此行，則默認(rèn)為中文提示*/</script>
<input type="text" name="mail" id="mail" onblur="fv.mail('mail')" /><span id="mailInfo"></span><br />
<asp:TextBox ID="username" runat="server" onblur="fv.username('username')"></asp:TextBox><span id="usernameInfo"></span><br />
<input type="submit" onclick="return fv.isValid()" value="Submit" />
</div>
</form>
</body>
</html>
XXquot;等字符：“[^%&',;=?$x22]+”
只能輸入漢字：“^[u4e00-u9fa5],{0,}$”
驗(yàn)證Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
驗(yàn)證InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
驗(yàn)證電話號碼：“^((d{3,4})|d{3,4}-)?d{7,8}$”
正確格式為：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
驗(yàn)證身份證號（15位或18位數(shù)字）：“^d{15}|d{}18$”
驗(yàn)證一年的12個月：“^(0?[1-9]|1[0-2])$”正確格式為：“01”-“09”和“1”“12”
驗(yàn)證一個月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正確格式為：“01”“09”和“1”“31”。
匹配中文字符的正則表達(dá)式： [u4e00-u9fa5]
匹配雙字節(jié)字符(包括漢字在內(nèi))：[^x00-xff]
匹配空行的正則表達(dá)式：n[s| ]*r
匹配HTML標(biāo)記的正則表達(dá)式：/< (.*)>.*|< (.*) />/
匹配首尾空格的正則表達(dá)式：(^s*)|(s*$)
匹配Email地址的正則表達(dá)式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配網(wǎng)址URL的正則表達(dá)式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
(1)應(yīng)用：計算字符串的長度（一個雙字節(jié)字符長度計2，ASCII字符計1）
String.prototype.len=function(){return this.replace([^x00-xff]/g,"aa").length;}
(2)應(yīng)用：javascript中沒有像vbscript那樣的trim函數(shù)，我們就可以利用這個表達(dá)式來實(shí)現(xiàn)
String.prototype.trim = function()
{
return this.replace(/(^s*)|(s*$)/g, "");
}
(3)應(yīng)用：利用正則表達(dá)式分解和轉(zhuǎn)換IP地址
function IP2V(ip) //IP地址轉(zhuǎn)換成對應(yīng)數(shù)值
{
re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正則表達(dá)式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}
(4)應(yīng)用：從URL地址中提取文件名的javascript程序
s="http://www.dbjr.com.cn/page1.htm";
s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2") ; //Page1.htm
(5)應(yīng)用：利用正則表達(dá)式限制網(wǎng)頁表單里的文本框輸入內(nèi)容
用正則表達(dá)式限制只能輸入中文：onkeyup="value="/blog/value.replace(/["^u4E00-u9FA5]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
用正則表達(dá)式限制只能輸入全角字符： onkeyup="value="/blog/value.replace(/["^uFF00-uFFFF]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用正則表達(dá)式限制只能輸入數(shù)字：onkeyup="value="/blog/value.replace(/["^d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
用正則表達(dá)式限制只能輸入數(shù)字和英文：onkeyup="value="/blog/value.replace(/[W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''
- vbscript和javascript版的15位, 18位的身份證號碼的驗(yàn)證函數(shù).以及根據(jù)身份證取省份,生日,性別
- 經(jīng)常用到的javascript驗(yàn)證函數(shù)收集
- JS支持帶x身份證號碼驗(yàn)證函數(shù)
- js form 驗(yàn)證函數(shù) 當(dāng)前比較流行的錯誤提示
- javascript 手機(jī)號碼正則表達(dá)式驗(yàn)證函數(shù)
- 28個JS驗(yàn)證函數(shù)收集
- javascript 身份證號碼驗(yàn)證函數(shù)(可辨真?zhèn)?，支?5或18位身份證號)測試誤差為0
- Js 小數(shù)驗(yàn)證函數(shù)代碼(基于正則)
- JAVASCRIPT車架號識別/驗(yàn)證函數(shù)代碼 汽車車架號驗(yàn)證程序
- javascript 常用驗(yàn)證函數(shù)總結(jié)
相關(guān)文章
javascript 單選按鈕 單擊選中 雙擊取消選擇實(shí)現(xiàn)代碼
很多情況下，我們需要對radio單選框?qū)崿F(xiàn)取消選擇，這里用js的實(shí)現(xiàn)方法，確實(shí)不錯。2010-08-08
一直復(fù)略了的一個問題，關(guān)于表單重復(fù)提交
一直復(fù)略了的一個問題，關(guān)于表單重復(fù)提交...2007-02-02
剛才博客園的javascript首頁看到一個朋友的全選/反選效果。2010-04-04
js修改form的action屬性的函數(shù)2008-11-11
一段實(shí)時更新的時間代碼...2006-07-07
javascript各瀏覽器中option元素的表現(xiàn)差異
javascript各瀏覽器中option元素的表現(xiàn)差異,需要的朋友可以參考下。2011-04-04
二級連動的另一個不錯的實(shí)現(xiàn)方法...2007-01-01
比如在一個表單元素中 我們可以通過手寫函數(shù),清空某種元素的值,以上是我的個人總結(jié),高手就繞過。2009-12-12
File文件控件，選中文件(圖片,flash,視頻)即立即預(yù)覽顯示
非常不錯的File文件控件，圖片,flash,視頻都可以立即顯示，推薦使用。2009-04-04
javascript 表單規(guī)則集合對象,其實(shí)就是三個常用的但比較麻煩的不容易記憶的規(guī)則，如果想要更全的，可以到腳本之家查看之前發(fā)布的一些文章。2009-07-07