js常用表单验证
2010-06-01 09:41
381 查看
============================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 正则表达式.
*/
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>
/**
* 基础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 正则表达式.
*/
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS常用表单验证
- JS表单验证-12个常用的JS表单验证
- JS常用正则表达式表单验证代码大汇总
- js 常用表单验证函数归纳
- 前端表单验证常用的15个JS正则表达式
- JS常用表单验证方法总结
- 工作中常用到的JS表单验证代码(包括例子)
- js 常用正则表达式表单验证代码
- js 常用正则表达式表单验证代码
- js验证表单时常用的正则表达式
- 前端表单验证常用的15个JS正则表达式
- 前端表单验证常用的15个JS正则表达式
- 常用JS表单验证方法
- 最常用的15个JS正则表达式（前端表单验证）
- 常用JavaScript(js)表单验证CheckList V1.0(beta)
- 常用表单验证js
- JS表单数据验证的正则表达式(常用)
- JS表单验证的代码(常用)
- 常用js表单验证
- jquery.validate.js使用之自定义表单验证规则，下面列出了一些常用的验证法规则