日期:2014-05-16  浏览次数:20449 次

各位亲帮忙看下这段JQUERY的表单验证代码
因为是初学,照着教程做了几次,不停的修改始终不得要领,我觉得是我思路不对,请各位指点指点小弟!
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新用户注册</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">

</head>
<body>

<div class="regist_step1"></div>


<script type="text/javascript">
var regname=/^[\w]+$/g;
$(document).ready(function(){
$("#1").blur(function()
 {if(regname.test(this)=true)
 {
 $("#1tip").html("输入正确");
 }
 else
 {$("#1").focus();
 $("#1tip").html("用户名不能为空,\n且只能为2-16个数字或英文以及下划线组成的字符");
 return false;}
 ;}
)
})
</script>
 



<form class="regist_2" action="registra.php" method="post" name="reg_1" enctype="multipart/form-data">
<p><label for="1">用户名:</label><input type="text" class="regist_1" name="user_name" id="1"/></p>
<p><label for="2">登录密码:</label><input type="password" class="regist_1" name="user_password" id="2"/></p>
<p><label for="3">确认密码:</label><input type="password" class="regist_1" name="confermare_psw" id="3"/></p>
<p><label for="4"> 验证码:</label><input type="text" class="regist_1" name="Verfy" id="4"/></p> 
<p><label for="5"> 我已阅读并同意<a href="guize.php" target="_blank">《用户使用规则》</a></label><input type="checkbox" name="comferma_rule" id="5"/></p>
<input type="image" src="../icon/btn3.gif" onclick="document.formName.submit()"/>
</form>
<span id="1tip" class="err"></span>
<img src="Verify.php" class="verify">

</body>

------解决方案--------------------
楼主,看了你的代码,我觉得:唉
1.<script>标签最好放在<head></head>之间
2.if(regname.test(this)=true)//不能给函数返回值赋值
3.<p><label for="1">两个标签没有任何意义
4.<label>与input id重复且取名极不规范
5.onclick=document.formName.submit(),你用的是图片按钮,点击的话默认提交表单 
你把onclick绑定提交事件完全没有必要
我根据你的需求把你用户名的判断的代码改进了一下,点击输入框就会触发对应函数

<style type="text/css">
#div1{
width:200px;
margin-top:-20px;
margin-left:250px; 
}
</style>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").hide();
//var a=$("#1").val();
var patrn=/^[A-Za-z][A-Za-z0-9_]{2,16}$/;
$("#1").focus(function(){
//alert($("#1").val());
if($("#1").val()==""){
$("#div1").show().css("background-color","#00FFFF").html("请输入用户名!");
return false;
}
});
$("#1").blur(function(){
//alert($("#1").val());
if (!patrn.test($("#1").val())){
$("#div1").show().css("background-color","#FF0000").html("用户名格式不正确");
return false; 
}else{
$("#div1").show().css("background-color","#00FF00").html("输入正确");
}
});
})