JQuery文本框验证
Posted dqh123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery文本框验证相关的知识，希望对你有一定的参考价值。
<" CODEPAGE="936"%>
<!--#include file="conncon.asp"-->
<!--#include file="../ht/contain/configweb.asp"-->
<!--#include file="../ht/contain/sqlFun.asp"-->
<!--#include file="../ht/contain/sql.asp"-->
<%‘Session.CodePage=936%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<%
dim tname,tename
tname="在线咨询"
tename="Online Consultation"
%>
<%call DBConnBegin()%>
<%
dim yid
yid=101
sql="select type_title,type_keyword,type_description from arale1 where type_id="&yid&""
oRs.open sql,oconn,1,1
webname=ors(0)
webdescription=oRs(2)
webkey=oRs(1)
oRs.close
%>
<title><%=tname%>——<%=webname%></title>
<meta name="description" content="<%=webdescription%>">
<Meta name="Keywords" Content="<%=webkey%>">
<!--#include file="../title.asp"-->
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/MSClass.js"></script>
<style type="text/css">
a {color:#003399}
.highslide-maincontent
{
position: absolute;
padding:25px 30px;
overflow:hidden;
_zoom:1;
z-index:10000;
left:478px;
top:7px;
width:350px;
height: 396px;
border:solid 4px #ccc
}
.highslide-maincontent h3
{
text-align: right;text-transform: uppercase;color:#7B9859;font-size:11px;margin-bottom:10px;
}
.highslide-maincontent h5
{
text-transform:
uppercase;color:#000;font-size:14px;margin-top:0;
}
.highslide-maincontent .closeMe
{
position: absolute;
top:8px;
right:10px;
left: 15px;
}
.highslide-maincontent .closeMe a {color:#7B9859;text-decoration:none;}
.highslide-maincontent .closeMe a strong {font-weight:bold;color:#7B9859;}
.highslide-maincontent p {text-align: left;font-size:12px;margin-bottom:5px;}
.highslide-maincontent p strong {font-size:14px;display:block;text-align: center;}
label.itext {display:block;}
input.itext
{
border:none;
width:321px;
height:18px;
background-image:url(../images/ly/bg_input.png);
padding:6px;
font-size:15px;
font-weight:bold;
}
input.isubmit
{
display:block;
width:125px;
height:35px;
border:none;
padding:6px;
background-image:url(../images/ly/btn_submit.png);
}
textarea.itextarea
{
border:none;
width:321px;
height:76px;
background-image:url(../images/ly/bg_ta.png);
padding:6px;
font-size:12px;
font-weight:bold;
}
.highslide-maincontent
{
}
#Screen
{
position:absolute;
top: 0px;
left: 0px;
background: #000000;
filter: alpha(Opacity=40);
height:500px;
}
.clsError{font-size:13px;border:solid 1px #cc3300;display:none;background-color:#ffe0a3;width:150px; padding:2px; margin-bottom:2px}
</style>
<LINK href="../images/Validator/Tooltip.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function showdlog()
{
$(".highslide-maincontent").show(500);
showScreen();
}
// 锁屏
function showScreen()
{
var Msg = document.getElementById(‘quote‘);
var Bg = document.getElementById(‘Screen‘);
Bg.style.width = getWidth()+‘px‘;
Bg.style.height = getHeight()+‘px‘;
document.getElementById(‘quote‘).style.left=(document.body.clientWidth/2)-300+"px"; // alert(screen.height/2-240);
document.getElementById(‘quote‘).style.top=screen.height/2-240+"px";
Msg.style.display = ‘block‘;
Bg.style.display = ‘block‘;
}
//解屏
function hideScreen()
{
var Msg = document.getElementById(‘quote‘);
var Bg = document.getElementById(‘Screen‘);
Msg.style.display = ‘none‘;
Bg.style.display = ‘none‘;
}
// 获取宽度
function getWidth()
{
var strWidth,clientWidth,bodyWidth;
clientWidth = document.documentElement.clientWidth;
bodyWidth = document.body.clientWidth;
if(bodyWidth > clientWidth)
{
strWidth = bodyWidth + 20;
}
else
{
strWidth = clientWidth;
}
return strWidth;
}
//获取高度
function getHeight()
{
var strHeight,clientHeight,bodyHeight;
clientHeight = document.documentElement.clientHeight;
bodyHeight = document.body.clientHeight;
if(bodyHeight > clientHeight)
{
strHeight = bodyHeight + 30;
}
else
{
strHeight = clientHeight;
}
return strHeight+1000;
}
function closes()
{
$("#quote").hide(100);
location.href=‘index.asp‘;
hideScreen();
}
function add()
{
if ($("#name").val()=="")
{
$("#divError").show(500).html("输入的名称不能为空!");
$("#name").focus();
return false;
}
if ($("#emali").val()=="")
{
$("#divError").show(500).html("输入Emali不能为空!");
$("#emali").focus();
return false;
}
if ($("#tel").val()=="")
{
$("#divError").show(500).html("输入电话不能为空!");
$("#tel").focus();
return false;
}
if($("#nr").val()=="")
{
$("#divError").show(500).html("输入内容不能为空!");
$("#nr").focus();
return false;
}
else
{
if ($("#name").val()!="")
{
$("#divError").hide();
}
if($("#emali").val()!="")
{
var search_str = /^[w-.][email protected][w-.]+(.w+)+$/;
if(!search_str.test($("#emali").val()))
{
$("#divError").show(500).html("输入Emali格式不正确!!!");
$(‘#emali‘).focus();
return false;
}
else
{
$("#divError").hide();
}
}
if($("#tel").val()!="")
{
var isMobile=/^(?:13d|15d)d{5}(d{3}|*{3})$/;
var isPhone=/^((0d{2,3})-)?(d{7,8})(-(d{3,}))?$/;
if(!isMobile.test($("#tel").val()))
{
$("#divError").show(500).html("请正确填写手机号，例如:13415764179 或0321-4816048");
$("#tel").focus();
return false;
}
else
{
$("#divError").hide();
}
}
if($("#nr").val()!="")
{
$("#divError").hide();
}
var strTxtName = encodeURI($("#name").val());
var strTxtemali = encodeURI($("#emali").val());
var strTxttel = encodeURI($("#tel").val());
var strTxtnr = encodeURI($("#nr").val());
$.ajax({
type: "POST",
url: "index_msg_js.asp",
data:"name="+escape($("#name").val()),
data: { name: strTxtName,emali: strTxtemali,tel:strTxttel,nr:strTxtnr},
success: function()
{
alert("数据提交成功!");
window.location.href=‘../index.asp‘;
}
});
//$("#name").val()="";
//$("#emali").val()="";
//$("#tel").val()="";
//$("#nr").val()="";
}
}
</script>
</head>
<body onLoad="MM_preloadImages(‘../images/nav30_01.jpg‘,‘../images/nav30_02.jpg‘,‘../images/nav30_03.jpg‘,‘../images/nav30_04.jpg‘,‘../images/nav30_05.jpg‘)" onload="showdlog()">
<!--#include file="index01_top.asp"-->
<table border="0" cellpadding="0" cellspacing="0" id="width965">
<tr>
<td align="left"><a href="index.asp" title="首页">首页</a> > <%=tname%></td>
</tr>
</table>
<div id="Screen"></div>
<form action="" method="post">
<div class="highslide-maincontent" id="quote">
<h3>
<span class="closeMe" onclick="return hs.close(this)" >
<a href="#" id="close" onclick="closes()">close <strong>X</strong></a></span>
</h3>
<br>
<h5>预约课程体验,咨询辅导事宜,请花30秒留言</h5>
<p><strong>(工作日24小时内回复)</strong></p>
<p><label class="itext">姓 名: </label><input type="text" class="itext" id="name"/></p>
<p><label class="itext">E-mail: </label><input class="itext " type="text" id="emali" tip="输入合法邮件地址如:[email protected]"/></p>
<p><label class="itext">电 话: </label><input class="itext " type="text" id="tel"/></p>
<p><label class="itext">内 容 </label><textarea class="itextarea" id="nr"></textarea></p>
<div style="position:absolute; left: -5px; top: 396px; width: 343px; overflow:hidden">
<div id="divError" class="clsError"></div>
</div>
<p style="text-align:right">
<input type="button" onclick="return add()" class="isubmit" value="提 交" src="../images/ly/btn_submit.png"/>
</p>
</div>
</form>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" id="width965">
<tr>
<td width="235" valign="top"><!--#include file="left_service01.asp"-->
<!--#include file="indexleft_news.asp"--></td>
<td width="19"><img src="../images/kong.gif" width="1" height="1" /></td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" height="6" align="left" valign="top"><img src="../images/yuan_lt.jpg" width="6" height="6" /></td>
<td class="line_top"><img src="../images/kong.gif" width="1" height="1" /></td>
<td width="6" height="6" align="right" valign="top"><img src="../images/yuan_rt.jpg" width="6" height="6" /></td>
</tr>
<tr>
<td class="line_left11"><img src="../images/kong.gif" width="1" height="1" /></td>
<td valign="top" class="yuanbg11"><table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td align="left"><strong><%=tename%></strong> <span class="font_14_7A7A7A"><strong><%=tname%></strong></span></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="15" cellpadding="0">
<tr>
<td align="center">
<!--begin-->
<script language="javascript">
function CheckForm(theform)
{
if(theform.txt_title.value==‘‘)
{
alert(‘请输入留言标题‘);
theform.txt_title.focus();
return false;
}
if(theform.txt_name.value==‘‘)
{
alert(‘请输入您的姓名‘);
theform.txt_name.focus();
return false;
}
if(theform.ta_info.value==‘‘)
{
alert(‘请输入您的留言‘);
theform.ta_info.focus();
return false;
}
}
</script>
<table width="80%" border="0" cellpadding="0" cellspacing="8">
<form action="index_msg_js.asp" method="post" onSubmit="return CheckForm(this);">
<tr>
<td width="80" align="right"> 主 题：</td>
<td align="left" background="../all/images/bg_input.png"><input name="txt_title" type="text" style="width:260px;" /></td>
</tr>
<tr>
<td align="right"> 姓 名：</td>
<td align="left"><input name="txt_name" type="text" style="width:260px;" /></td>
</tr>
<tr>
<td align="right">地 址：</td>
<td align="left"><input name="txt_cty" type="text" style="width:260px;" /></td>
</tr>
<tr>
<td align="right"> 电 话：</td>
<td align="left"><input name="txt_tel1" type="text" class="input30" style="width:30px;" />
-
<input name="txt_tel2" type="text" class="input60" style="width:60px;"/>
-
<input name="txt_tel" type="text" class="input120" style="width:60px;"/></td>
</tr>
<tr>
<td align="right">E-mail:</td>
<td align="left"><input name="txt_email" type="text" style="width:260px;" /></td>
</tr>
<tr>
<td align="right"> 内容：</td>
<td align="left"><textarea name="ta_info" rows="5" style="width:260px;"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="image" src="../images/gif53_012.gif" width="83" height="25" /></td>
</tr>
</form>
</table>
<!--end-->
</td>
</tr>
</table></td>
<td class="line_right11"><img src="../images/kong.gif" width="1" height="1" /></td>
</tr>
<tr>
<td align="left" valign="bottom"><img src="../images/yuan_lb.jpg" width="6" height="6" /></td>
<td class="line_bottom"><img src="../images/kong.gif" width="1" height="1" /></td>
<td align="right" valign="bottom"><img src="../images/yuan_rb.jpg" width="6" height="6" /></td>
</tr>
</table></td>
</tr>
</table>
<!--#include file="xx_seach.asp"-->
<!--#include file="bottom.asp"-->
<%call DBConnEnd()%>
</body>
</html>
以上是关于JQuery文本框验证的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 验证插件，如何在文本框上添加正则表达式验证？