============================js===========================================
/**
* 基礎JS類，封裝常用的js表單驗證操作.
* 頁面調用方法:Base.match('input',Base.IP)
* @author 賀少輝.
*/
var Base = function (){};
/*IP地址*/Base.IP=/^((2[0-4]/d|25[0-5]|[01]?/d/d?)/.){3}(2[0-4]/d|25[0-5]|[01]?/d/d?)$/;
/*QQ號*/Base.QQ=/^/d{5,12}$/;
/*郵件*/Base.EMAIL=/^([a-z0-9A-Z]+[-|/_|/.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?/.)+[a-zA-Z]{2,}$/;
/*身份證*/Base.IDCARD=/^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)/d{4}((19/d{2}(0[13-9]|1[012])(0[1-9]|[12]/d|30))|(19/d{2}(0[13578]|1[02])31)|(19/d{2}02(0[1-9]|1/d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))/d{3}(/d|X|x)?$/;
/*有線電話*/Base.PHONE=/^/(0/d{2}/)[- ]?/d{8}|0/d{2}[- ]?/d{8}|/(0/d{3}/)[- ]?/d{8}|0/d{3}[- ]?/d{8}$/;
/*移動*/Base.MOBILE=/^1(3[4-9]|5[012789]|8[78])/d{8}$/;
/*聯通*/Base.UNICOM=/^1(3[0-2]|5[56]|8[56])/d{8}$/;
/*電信*/Base.TELECOM=/^18[09]/d{8}$/;
/**
* 正則匹配函數,如果匹配成功則返回false,否則返回true
* @param input 要匹配的字元序列.
* @param input Regex.
*/
Base.match=function(input,regex){
return !(regex.test(input));
}
/**
* 檢查是否為網址
* @param {} str_url
* @param {} alertStr 彈出欄位內容
* @param {} idStr 游標定位的欄位ID<b>只能接收ID</b>
* @return {Boolean} <b>不是</b>網址返回false;
*/
Base.isURL=function(str_url){// 驗證url
var strRegex = "^((https|http|ftp|rtsp|mms)?://)" +
"?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
+
"(([0-9]{1,3}/.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
+
"|" // 允許IP和DOMAIN（網域名稱）
+
"([0-9a-z_!~*'()-]+/.)*" // 網域名稱- www.
+
"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]/." // 次層網域
+
"[a-z]{2,6})" // first level domain- .com or .museum
+
"(:[0-9]{1,4})?" // 連接埠- :80
+
"((/?)|" // a slash isn't required if there is no file name
+
"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
var re = new RegExp(strRegex);
return !(re.test(str_url));
/* 這種寫法可以參考一下if (!re.test(str_url))
this.AlertAndRFalse(alertStr, idStr);
*/
}
=================================頁面===============================
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js表單驗證</title>
<script src="./form.js"></script>
<script language="javascript">
function addRoom(){
if(form1.ip.value==""||Base.match(form1.ip.value,Base.IP)){
alert("請輸入正確的IP地址");
document.getElementById('ip').focus();
return ;
}
if(form1.qq.value==""||Base.match(form1.qq.value,Base.QQ)){
alert("請輸入正確的qq地址");
return ;
}
if(form1.email.value==""||Base.match(form1.email.value,Base.EMAIL)){
alert("請輸入正確的email");
return ;
}
if(form1.idcard.value==""||Base.match(form1.idcard.value,Base.IDCARD)){
alert("請輸入正確的身份證");
return ;
}
if(form1.phone.value==""||Base.match(form1.phone.value,Base.PHONE)){
alert("請輸入正確的有線電話");
return ;
}
if(form1.mobile.value==""||Base.match(form1.mobile.value,Base.MOBILE)){
alert("請輸入正確的移動號碼");
return ;
}
if(form1.unicom.value==""||Base.match(form1.unicom.value,Base.UNICOM)){
alert("請輸入正確的聯通號碼");
return ;
}
if(form1.telecom.value==""||Base.match(form1.telecom.value,Base.TELECOM)){
alert("請輸入正確的電訊號碼");
return ;
}
if(form1.url.value==""||Base.isURL(form1.url.value)){
alert("請輸入正確的URL地址");
document.getElementById('url').focus();
return ;
}
if(form1.price.value==""){
alert("請輸入價格!");
form1.price.foucs();
return;
}
if(form1.order_no.value==""){
alert("請輸入排序號!");
return ;
}
}
</script>
</head>
<body>
<form action="" method="post" name="form1">
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td colspan="2" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="4"><tr><td>您的位置：JS表單驗證 </td></tr></table>
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#333333">
<tr><td colspan="2" valign="top" bgcolor="#FFFFFF">
<table width="98%" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#D2D2D2" class="tb_bd line20px">
<tr><td width="24%" align="right" class="tbtr_bg">IP地址：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="ip" id="ip" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">QQ號：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="qq" id="qq" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">email：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="email" id="email" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">身份證：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="idcard" id="idcard" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">有線電話：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="phone" id="phone" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">移動號碼：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="mobile" id="mobile" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">聯通號碼：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="unicom" id="unicom" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">電訊號碼：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="telecom" id="telecom" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">URL地址：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<INPUT name="url" id="url" class="box_60" maxlength="50" size="20">
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">價格：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<input class="box_60" align="left" valign="middle" maxlength="7" style="ime-mode:disabled" onkeyup="if(!/^/d+(/./d*)?$/.test(this.value))this.value=''" onpaste="return false" name="price" id="price" >
</td>
</tr>
<tr><td width="24%" align="right" class="tbtr_bg">排序號：</td>
<td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
<input align="left" valign="middle" maxlength="4" style="ime-mode:disabled" onkeyup="if(!/^/d+(/d*)?$/.test(this.value))this.value=''" onpaste="return false" name="order_no" id="order_no" > </td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="center" colspan="4" colspan=2>
<input name="Submit124" onClick="addRoom()" type="button" value="保 存">
<input name="Submit12422" type="button" value="返 回" onClick="javascript:window.history.back();">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
