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

neibuhao 2010-01-13 03:49:28

我用javascript 验证表单内容，功能实现了，样式上不太理想。我想让通过验证时字体这绿色怎么办？现在是不管是否合法都是红色。

代码如下：

<style type="text/css">

</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>

...全文

118 3 打赏收藏转发到动态举报

写回复

用AI写文章

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

打赏
举报

ggwk 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>