请教一个javascript 验证表单的问题,多谢

neibuhao 2010-01-13 03:49:28
我用javascript 验证表单内容,功能实现了,样式上不太理想。我想让通过验证时字体这绿色怎么办?现在是不管是否合法都是红色。

代码如下:



<style type="text/css">
<!--
.text {
font-size: 12px;
color: #FF0000;
text-decoration: none;
}
-->
</style>
</head>

<body>
<script language="javascript">

function test()
{
if(document.form1.username.value.length<6){
document.getElementById("text1").innerHTML = "用户名不能少于6个字符!";//x是一个层
return false;
}else{
document.getElementById("text1").innerHTML="用户名通过验证";
}
if(document.form1.userpass.value.length<6){
document.getElementById("text2").innerHTML="密码不能少于6个字符!";
return false;
}else{
document.getElementById("text2").innerHTML="密码通过验证";
}
}
</script>



<form id="form1" name="form1" method="post" action="" onsubmit="return test()">
<table width="500">
<tr>
<td width="182"><input name="username" type="text" id="username" onblur="return test()" /></td>
<td width="306"><div id="text1" class="text"></div></td>
</tr>
<tr>
<td><input name="userpass" type="text" id="userpass" onblur="return test()" /></td>
<td><div id="text2" class="text"></div></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit" value="提交" /></td>
</tr>
</table>
</form>
...全文
109 3 打赏 收藏 举报
写回复
3 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
chchl2007 2010-01-13
  • 打赏
  • 举报
回复
我是使用jquery实现的,标红的代码是我改动的代码。

<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
<!--
.text {
font-size: 12px;
color: #FF0000;
text-decoration: none;
}
.text1 {
font-size: 12px;
color: green;
text-decoration: none;
}
-->
</style>
</head>

<body>
<script language="javascript">

function test()
{
if(document.form1.username.value.length <6){
document.getElementById("text1").innerHTML = "用户名不能少于6个字符!";//x是一个层
return false;
}else{
$('#text1').addClass('text1');
document.getElementById("text1").innerHTML="用户名通过验证";
}
if(document.form1.userpass.value.length <6){
document.getElementById("text2").innerHTML="密码不能少于6个字符!";
return false;
}else{
$('#text2').addClass('text1');
document.getElementById("text2").innerHTML="密码通过验证";
}
}
</script>
shenzhenNBA 2010-01-13
  • 打赏
  • 举报
回复
<style type="text/css">
<!--
.text {
font-size: 12px;
color: #FF0000;
text-decoration: none;
}
.passcheck{font-family:verdana; font-size:12px; color:green; font-weight:bold;}
-->
</style>
</head>

<body>
<script language="javascript">

function test()
{
if(document.form1.username.value.length <6){
document.getElementById("text1").innerHTML = "用户名不能少于6个字符!";//x是一个层
return false;
}else{
document.getElementById("text1").innerHTML="用户名通过验证";
}
if(document.form1.userpass.value.length <6){
document.getElementById("text2").innerHTML="密码不能少于6个字符!";
return false;
}else{
document.getElementById("text2").innerHTML="密码通过验证";
document.getElementById("text2").className="passcheck";
}
}
</script>


<form id="form1" name="form1" method="post" action="" onsubmit="return test()">
<table width="500">
<tr>
<td width="182"> <input name="username" type="text" id="username" onblur="return test()" /> </td>
<td width="306"> <div id="text1" class="text"> </div> </td>
</tr>
<tr>
<td> <input name="userpass" type="text" id="userpass" onblur="return test()" /> </td>
<td> <div id="text2" class="text"> </div> </td>
</tr>
<tr>
<td colspan="2"> <input type="submit" name="Submit" value="提交" /> </td>
</tr>
</table>
</form>
wbhggwk 2010-01-13
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>


<style type="text/css">
<!--
.text {
font-size: 12px;
color: #FF0000;
text-decoration: none;
}
-->
</style>
</head>

<body>
<script language="javascript">

function test()
{
if(document.form1.username.value.length <6){
document.getElementById("text1").innerHTML = "用户名不能少于6个字符!";//x是一个层
return false;
}else{
document.getElementById("text1").innerHTML="<font color='green'>用户名通过验证</font>";
}
if(document.form1.userpass.value.length <6){
document.getElementById("text2").innerHTML="密码不能少于6个字符!";
return false;
}else{
document.getElementById("text2").innerHTML="<font color='green'>密码通过验证</font>";
}
}
</script>


<form id="form1" name="form1" method="post" action="" onsubmit="return test()">
<table width="500">
<tr>
<td width="182"> <input name="username" type="text" id="username" onblur="return test()" /> </td>
<td width="306"> <div id="text1" class="text"> </div> </td>
</tr>
<tr>
<td> <input name="userpass" type="text" id="userpass" onblur="return test()" /> </td>
<td> <div id="text2" class="text"> </div> </td>
</tr>
<tr>
<td colspan="2"> <input type="submit" name="Submit" value="提交" /> </td>
</tr>
</table>
</form>
</body>
</html>
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-13 03:49
社区公告
暂无公告