JavaScript验证问题

原创 于 2011-01-27 20:50:53 发布 · 160 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #腾讯 #SQL #XHTML #ViewUI

本文介绍了一段用于表单验证的JavaScript脚本，并通过实际案例展示了如何调试和修正脚本中的错误。针对用户登录名、密码、真实姓名等多个字段进行有效性验证。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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" />
<title>测试页面</title>
<script type="text/javascript">
function checkform(){
//验证用户名
if($("username").value == ""){
$("n_msg").innerHTML ="用户名不可以为空";
$("username").select();
$("username").focus();
return false;
}else{
if($("username").value.length < 6){
$("n_msg").innerHTML = "用户名必须大于6个字符";
$("username").select();
$("username").focus();
return false;
}
}
//验证密码
if($("password").value == ""){
$("p_msg").innerHTML ="密码不可以为空";
$("password").select();
$("password").focus();
return false;
}else{
if($("password").value.length < 10){
$("p_msg").innerHTML = "密码必须大于10个字符";
$("password").select();
$("password").focus();
return false;
}
}

return true;
}

function $(id){
return document.getElementById(id);
}
</script>
<style type="text/css">
body{ font:12px 宋体}
.c_red{ color:#f00}
</style>
</head>

<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<form method="post" onsubmit="return checkform()">
<tr>
<td width="89">用户名</td>
<td width="223"><input name="username" type="text" id="username" /></td>
<td width="188" id="n_msg" class="c_red"></td>
</tr>
<tr>
<td>密码</td>
<td><input name="password" type="password" id="password" /></td>
<td id="p_msg" class="c_red"></td>
</tr>
<tr>
<td colspan="3"><input name="sub" type="submit" id="sub" value="提交" /></td>
</tr>
</form>
</table>
//检查电话号码
function checkNumber(){
if($("#number").val().search(/^0{0,1}(13[1-9]{1}|15[8,9]|189)[0-9]{8}$/)!=-1
|| $("#number").val().search(/^[0-9]{2,4}-[0-9]{7,9}$/)!=-1){

return true;
}else{
return false;
}
</body>
</html>


上面这段代码是没错的，可是我仿照上面写为什么就出错了呢？

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
body{ font:12px 宋体}
.c_red{ color:#f00}
</style>
<script language="javascript" type="text/javascript">
function checkform()
{
//验证登录名
if($("regLoginNametext".value=="")){
$("n_msg").innerHTML ="登录名不可以为空";
$("regLoginNametext").select();
$("regLoginNametext").focus();
return false;
}else{
if($("regLoginNametext").value.length < 6){
$("n_msg").innerHTML = "用户名必须大于6个字符";
$("regLoginNametext").select();
$("regLoginNametext").focus();
return false;
}
}
//验证密码
if($("regLoginPasstext").value == ""){
$("p_msg").innerHTML ="密码不可以为空";
$("regLoginPasstext").select();
$("regLoginPasstext").focus();
return false;
}else if{
if($("regLoginPasstext").value.length < 5){
$("p_msg").innerHTML = "密码必须大于5个字符";
$("regLoginPasstext").select();
$("regLoginPasstext").focus();
return false;
}else{
if($("regLoginPasstext").value!=$("regLoginPasstootext").value)
{
$("ps_msg").innerHTML="两次输入的密码不一致";
$("regLoginPasstootext").select();
$("regLoginPasstootext").focus();
return false;
}
}
//验证真实姓名
if($("regName").value == ""){
$("rn_msg").innerHTML ="用户名不可以为空";
$("regName").select();
$("regName").focus();
return false;
}else{
if($("regLoginPasstext").value.length < 6){
$("rn_msg").innerHTML = "用户名必须大于6个字符";
$("regLoginPasstext").select();
$("regLoginPasstext").focus();
return false;
}
}
//验证提示问题和回答
if($("regQuestiontext").value == ""){
$("pq_msg").innerHTML ="提示问题不可以为空";
$("regQuestiontext").select();
$("regQuestiontext").focus();
return false;
}else{
if($("regAnswertext").value.==""){
$("pa_msg").innerHTML = "必须回答问题";
$("regAnswertext").select();
$("regAnswertext").focus();
return false;
}
}
//验证Email
if($("regEmailtext").value==""){
$("e_msg").innerHTML ="email不可以为空";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;
}else{
if($("regEmailtext").indexOf("@",0)==-1 || $("regEmailtext").indexOf(".",0)==-1)
{
$("e-msg").innerHTML="输入的Email不合法,必须包括@和.符号";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;
}
}
//验证电话号码
if($("regPhonetext").value=="")
{
$("ph_msg").innerHTML ="电话号码不可以为空";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}else
{
if(!(=/(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9] {3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/).exec ("regPhonetext"))
{
$("ph-msg").innerHTML="请输入正确的电话号码:电话号码格式为国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}
}
//验证地址
if($("regAddresstext").value == ""){
$("a_msg").innerHTML ="地址不可以为空";
$("regAddresstext").select();
$("regAddresstext").focus();
return false;
}else{
if($("regLoginPasstext").value.length < 2){
$("a_msg").innerHTML = "地址必须大于2个字符";
$("regAddresstext").select();
$("regAddresstext").focus();
return false;
}
}
//验证身份证
if($("regPersonnotext").value == ""){
$("rp_msg").innerHTML ="身份证不可以为空";
$("regPersonnotext").select();
$("regPersonnotext").focus();
return false;
}else
{
if($("regPersonnotext").value.length<18)
{
$("rp_msg").innerHTML ="身份证不能少于18位数";
$("regPersonnotext").select();
$("regPersonnotext").focus();
return false;
}
}
return true;
}

function $(id)
{
return document.getElementById(id);
}

</script>
</head>

<body>
<form method="post" onsubmit="return checkform()">
<table width="358" height="411" border="2" bordercolor="#0000FF">
<tr>
<td width="346" bgcolor="#FFFFFF"><table width="349" height="407" border="0" bgcolor="#CCCC99">
<tr>
<td colspan="2"><div align="center"><strong>会员注册</strong></div></td>
</tr>
<tr>
<td colspan="2"><div align="center"><span class="STYLE1">注:为了您的帐号安全，请务必认真填写！！</span></div></td>
</tr>
<tr>
<td width="107"><div align="right">用户登录名：</div></td>
<td width="232"><label>
<input name="regLoginNametext" type="text" id="regLoginNametext" />
</label></td><td width="188" id="n_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">密码：</div></td>
<td><label>
<input name="regLoginPasstext" type="text" id="regLoginPasstext" />
</label></td>
<td id="p_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">确认密码：</div></td>
<td><label>
<input name="regLoginPasstootext" type="text" id="regLoginPasstootext" />
</label></td><td id="ps_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">真实姓名：</div></td>
<td><label>
<input name="regName" type="text" id="regName" />
</label></td><td id="rn_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">性别：</div></td>
<td><label>
<input name="sexBtn" type="radio" value="radiobutton" checked />
男
</label>
<label>
<input type="radio" name="sexBtn" value="radiobutton" />
女 </label></td>
</tr>
<tr>
<td><div align="right">密码问题：</div></td>
<td><label>
<input name="regQuestiontext" type="text" id="regQuestiontext" />
</label></td><td id="pq_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">密码答案：</div></td>
<td><label>
<input name="regAnswertext" type="text" id="regAnswertext" />
</label></td><td id="pa_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">Email：</div></td>
<td><label>
<input name="regEmailtext" type="text" id="regEmailtext" />
</label></td><td id="e_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">电话：</div></td>
<td><label>
<input name="regPhonetext" type="text" id="regPhonetext" />
</label></td><td id="ph_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">地址：</div></td>
<td><label>
<input name="regAddresstext" type="text" id="regAddresstext" />
</label></td><td id="a_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">身份证号：</div></td>
<td><label>
<input name="regPersonnotext" type="text" id="regPersonnotext" /><td id="rp_msg" class="c_red"></td>
</label></td>
</tr>
<tr>
<td height="58" colspan="2"><label></label>
<label>
<div align="center">
<input type="submit" value="提交" />
<input type="reset" name="Submit2" value="全部重写" />
</div>
</label></td>
</tr>
</table>
<label></label><label></label></td>
</tr>
</table>
</form>
</body>
</html>

问题补充 2010-02-27 14:37
//验证Email
if($("regEmailtext").value=="")
{
$("e_msg").innerHTML ="email不可以为空";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;
}
else if($("regEmailtext").indexOf("@",0)==-1 || $("regEmailtext").indexOf(".",0)==-1)
{

$("e-msg").innerHTML="输入的Email不合法,必须包括@和.符号";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;

}
//验证电话号码
if($("regPhonetext").value=="")
{
$("ph_msg").innerHTML ="电话号码不可以为空";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}else
{
if(!(/(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9] {3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/).exec ("regPhonetext"))
{
$("ph-msg").innerHTML="请输入正确的电话号码:电话号码格式为国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}
}问题补充 2010-02-27 14:38
//验证Email
if($("regEmailtext").value=="")
{
$("e_msg").innerHTML ="email不可以为空";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;
}
else if($("regEmailtext").indexOf("@",0)==-1 || $("regEmailtext").indexOf(".",0)==-1)
{

$("e-msg").innerHTML="输入的Email不合法,必须包括@和.符号";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;

}
//验证电话号码
if($("regPhonetext").value=="")
{
$("ph_msg").innerHTML ="电话号码不可以为空";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}else
{
if(!(/(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9] {3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/).exec ("regPhonetext"))
{
$("ph-msg").innerHTML="请输入正确的电话号码:电话号码格式为国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}
}
改完之后就这2个还是错的，请高手们指教啊！！！ぁ形影相随い 回答:2 人气:2 解决时间:2010-03-09 15:06
满意答案好评率：100% 下面的是我修改你的的。。。没有完全修好。可以验证到邮箱是否为空的那一步。邮箱格式没有验证


你自己再好好检查一下


<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
body{ font:12px 宋体}
.c_red{ color:#f00}
</style>
<script language="javascript" type="text/javascript">
function checkform()
{
//验证登录名
if($("regLoginNametext".value==""))
{
$("n_msg").innerHTML ="登录名不可以为空";
$("regLoginNametext").select();
$("regLoginNametext").focus();
return false;
}
else
{
if($("regLoginNametext").value.length < 6)
{
$("n_msg").innerHTML = "用户名必须大于6个字符";
$("regLoginNametext").select();
$("regLoginNametext").focus();
return false;
}
}
//验证密码
if($("regLoginPasstext").value == "")
{
$("p_msg").innerHTML ="密码不可以为空";
$("regLoginPasstext").select();
$("regLoginPasstext").focus();
return false;
}
else if($("regLoginPasstext").value.length < 5)
{
if($("regLoginPasstext").value.length < 5)
{
$("p_msg").innerHTML = "密码必须大于5个字符";
$("regLoginPasstext").select();
$("regLoginPasstext").focus();
return false;
}
}
else
{
if($("regLoginPasstext").value!=$("regLoginPasstootext").value)
{
$("ps_msg").innerHTML="两次输入的密码不一致";
$("regLoginPasstootext").select();
$("regLoginPasstootext").focus();
return false;
}
}
//验证真实姓名
if($("regName").value == "")
{
$("rn_msg").innerHTML ="用户名不可以为空";
$("regName").select();
$("regName").focus();
return false;
}
else
{
if($("regLoginPasstext").value.length < 6)
{
$("rn_msg").innerHTML = "用户名必须大于6个字符";
$("regLoginPasstext").select();
$("regLoginPasstext").focus();
return false;
}
}
//验证提示问题和回答
if($("regQuestiontext").value == "")
{
$("pq_msg").innerHTML ="提示问题不可以为空";
$("regQuestiontext").select();
$("regQuestiontext").focus();
return false;
}
else
{
if($("regAnswertext").value==""){
$("pa_msg").innerHTML = "必须回答问题";
$("regAnswertext").select();
$("regAnswertext").focus();
return false;
}
}
//验证Email
if($("regEmailtext").value=="")
{
$("e_msg").innerHTML ="email不可以为空";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;
}
else if($("regEmailtext").indexOf("@",0)==-1 || $("regEmailtext").indexOf(".",0)==-1)
{

$("e-msg").innerHTML="输入的Email不合法,必须包括@和.符号";
$("regEmailtext").select();
$("regEmailtext").focus();
return false;

}
//验证电话号码
if($("regPhonetext").value=="")
{
$("ph_msg").innerHTML ="电话号码不可以为空";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}else
{
if(!(/(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9] {3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/).exec ("regPhonetext"))
{
$("ph-msg").innerHTML="请输入正确的电话号码:电话号码格式为国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)";
$("regPhonetext").select();
$("regPhonetext").focus();
return false;
}
}
//验证地址
if($("regAddresstext").value == ""){
$("a_msg").innerHTML ="地址不可以为空";
$("regAddresstext").select();
$("regAddresstext").focus();
return false;
}else{
if($("regLoginPasstext").value.length < 2){
$("a_msg").innerHTML = "地址必须大于2个字符";
$("regAddresstext").select();
$("regAddresstext").focus();
return false;
}
}
//验证身份证
if($("regPersonnotext").value == ""){
$("rp_msg").innerHTML ="身份证不可以为空";
$("regPersonnotext").select();
$("regPersonnotext").focus();
return false;
}else
{
if($("regPersonnotext").value.length<18)
{
$("rp_msg").innerHTML ="身份证不能少于18位数";
$("regPersonnotext").select();
$("regPersonnotext").focus();
return false;
}
}
return true;
}

function $(id)
{
return document.getElementById(id);
}

</script>
</head>

<body>
<form method="post" onSubmit="return checkform()">
<table width="358" height="411" border="2" bordercolor="#0000FF">
<tr>
<td width="346" bgcolor="#FFFFFF"><table width="349" height="407" border="0" bgcolor="#CCCC99">
<tr>
<td colspan="2"><div align="center"><strong>会员注册</strong></div></td>
</tr>
<tr>
<td colspan="2"><div align="center"><span class="STYLE1">注:为了您的帐号安全，请务必认真填写！！</span></div></td>
</tr>
<tr>
<td width="107"><div align="right">用户登录名：</div></td>
<td width="232"><label>
<input name="regLoginNametext" type="text" id="regLoginNametext" />
</label></td><td width="188" id="n_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">密码：</div></td>
<td><label>
<input name="regLoginPasstext" type="text" id="regLoginPasstext" />
</label></td>
<td id="p_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">确认密码：</div></td>
<td><label>
<input name="regLoginPasstootext" type="text" id="regLoginPasstootext" />
</label></td><td id="ps_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">真实姓名：</div></td>
<td><label>
<input name="regName" type="text" id="regName" />
</label></td><td id="rn_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">性别：</div></td>
<td><label>
<input name="sexBtn" type="radio" value="radiobutton" checked />
男
</label>
<label>
<input type="radio" name="sexBtn" value="radiobutton" />
女 </label></td>
</tr>
<tr>
<td><div align="right">密码问题：</div></td>
<td><label>
<input name="regQuestiontext" type="text" id="regQuestiontext" />
</label></td><td id="pq_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">密码答案：</div></td>
<td><label>
<input name="regAnswertext" type="text" id="regAnswertext" />
</label></td><td id="pa_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">Email：</div></td>
<td><label>
<input name="regEmailtext" type="text" id="regEmailtext" />
</label></td><td id="e_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">电话：</div></td>
<td><label>
<input name="regPhonetext" type="text" id="regPhonetext" />
</label></td><td id="ph_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">地址：</div></td>
<td><label>
<input name="regAddresstext" type="text" id="regAddresstext" />
</label></td><td id="a_msg" class="c_red"></td>
</tr>
<tr>
<td><div align="right">身份证号：</div></td>
<td><label>
<input name="regPersonnotext" type="text" id="regPersonnotext" /><td id="rp_msg" class="c_red"></td>
</label></td>
</tr>
<tr>
<td height="58" colspan="2"><label></label>
<label>
<div align="center">
<input type="submit" value="提交" onClick="return checkform()" />
<input type="reset" name="Submit2" value="全部重写" />
</div>
</label></td>
</tr>
</table>
<label></label><label></label></td>
</tr>
</table>
</form>
</body>
</html>

评价答案
您已经评价过！好:1 您已经评价过！不好:0 您已经评价过！原创:0 您已经评价过！非原创:0 羽Smile♂ 回答采纳率:12.2% 2010-02-26 23:42 ぁ形影相随い的感言：
虽然不完整，但还是谢谢。问题找出来了，应该是e_msg,改成“e_msg”呵呵。


腾讯SOSO：http://wenwen.soso.com/z/q181832970.htm?w=javascript++focus%28%29&spi=1&sr=4&w8=javascript++focus%28%29&qf=20&rn=517&qs=4&ch=w.search.4
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值