css,js代码：
<!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 src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript" language="javascript"></script>
<script src="js/LocationSelect/location.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#loc").LocationSelect();
});
</script>
</head>
<style type="text/css">
body{ margin:0 auto;}
#top{ width:960px; height:25px;
margin:0 auto;
}
#top p{ margin-top:8px;}
#zhuce{ width:800px; height:78px;
margin:20px auto;}
#loginTa{ width:800px; height:auto;
border:1px solid #DCDCDC;
background-color:#FDFDFD;
margin:10px auto;
}
#loginTa a{ text-decoration:none;}
.but1{ width:56px; height:25px;
background-color:#F4961A;
color:#FFFFFF;
border:0px;}
.but1:hover{ background-color:#E66D02; border:0;}
.td66{ color:#666666; font-size:12px;}
input{ border:1px solid #CACACA;}
input:hover{ border:1px solid #64B0D7;}
.tdtitle{ color:#000000; font-size:14px;}
.onError{ background:url(images/reg3.gif) no-repeat 0 center; padding-left:25px;}
.onSuccess{ background:url(images/reg4.gif) no-repeat 0 center; padding-left:25px;}
span{ width:auto; height:30px;;}
span font{ width:auto; height:25px; margin-bottom:5px; border:1px solid red; font-size:12px; padding:5px 5px 0px 5px; background-color:#FFF8ED;}
</style>
<script type="text/javascript">
$(function(){
$("form :input").blur(function(){
var $parent=$(this).parent();
$parent.find(".onError").remove();
$parent.find(".onSuccess").remove();
if($(this).is('#user_name')){
var reg1=/^\b[a-zA-Z]$/;
var reg2=/^[a-zA-z][a-zA-Z0-9_]+$/;
var str=this.value;
if(this.value==""){
var errorMsg='请输入用户名！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else {
if(this.value.length < 6 || this.value.length >10 || reg2.test(str)==false){
var errorMsg='用户名格式不正确！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else {
$.get("RegisterAjax.php",
{user_name:this.value},
function(data,textstatus){
//alert(data);
if(data==1){
var errorMsg='该用户名已存在！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return t_n=1;
}
}
),"text"
}
}
}
if($(this).is('#user_pwd')){
var reg=/^\S{6,25}$/;
var str=this.value;
if(this.value==""){
var errorMsg='请输入密码！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
if(this.value.length < 6 || this.value.lenth >25 || reg.test(str)==false ){
var errorMsg='密码格式不正确！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return t_p=1;
}
}
}
if($(this).is('#user_pwd2')){
var str=this.value;
if(this.value==""){
var errorMsg='请再次输入密码！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
if(this.value != $('#user_pwd').val()){
var errorMsg='两次输入密码不一致，密码大小写敏感！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return t_p2=1;
}
}
}
if($(this).is('#email')){
//var reg=/^([a-z0-9][a-z0-9_\-\.]+)@([a-z0-9][a-z0-9\.\-]{0,20})\.([a-z]{2,4})$/;
var reg=/^([a-zA-Z][a-zA-Z0-9_]+)@([a-zA-Z0-9]{0,20})\.([a-z]{2,4})$/;
var str=this.value;
if(this.value==""){
var errorMsg='请输入邮箱！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
if(reg.test(str)==false){
var errorMsg='邮箱格式错误！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return t_e=1;
}
}
}
if($(this).is('#province')){
if(this.value==0){
var errorMsg='请选择省份/直辖市！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return str;
return true;
}
}
if($(this).is('#city')){
if(this.value==0){
var errorMsg='请选择市/区！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return str;
return true;
}
}
if($(this).is('#district')){
if(this.value==0){
var errorMsg='请选择县/地区！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return str;
return true;
}
}
if($(this).is('#telephone')){
var reg1=/^\d{11}$/;
var reg2=/^\d{4}\-\d{8}$/;
var str=this.value;
if(this.value==""){
var errorMsg='请输入联系电话！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
if( reg1.test(str)==false && reg2.test(str)==false ){
var errorMsg='联系电话格式错误，请重填！';
$parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');
}else{
$parent.append('<span class="onSuccess"> </span>');
return t_t=1;
}
}
}
});
});
</script>
12 个解决方案
#1
html表单代码：
<body>
<form method="post" action="RegisterAction.php">
<div id="top">
<p> <a href="index.php">享购首页</a>
<font color="red">您还未登陆！</font> |
<a href="login.php">登陆</a> |
<a href="Register.php">注册</a> | <a href="#">帮助</a> </p>
</div>
<div id="zhuce"><img src="images/zhuce2.gif" /></div>
<table id="loginTa" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#EDEDED">
<td align="left" height="30" width="200">
<font color="#FF6600" size="2" style="font-weight:600;"> 账号信息</font></td>
<td align="right"></td></tr>
<tr><td height="20"></td><td></td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>用户名：</td>
<td align="left"><input type="text" class="required" id=user_name name="user_name" style="width:230px; height:20px;">
</td></tr>
<tr><td height="20"></td><td class="td66">（6-10位字母、数字或下划线组合，首字符必须为字母。）</td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>密码：</td>
<td><input type="password" class="required" id=user_pwd name="user_pwd" style="width:230px; height:20px;"> </td></tr>
<tr><td height="20"></td><td class="td66"> （为了您的账号安全，强烈建议您的密码使用字母+数字等多种不同类型的组合，并且密码为6-25位。）</td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>再次输入密码：</td>
<td><input type="password" class="required" id=user_pwd2 name="user_pwd2" style="width:230px; height:20px;"> </td></tr>
<tr><td height="20"></td><td class="td66">（确保密码输入正确。）</td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>邮箱：</td>
<td><input type="text" class="required" id=email name="email" style="width:230px; height:20px;"> </td></tr>
<tr><td height="20"></td><td class="td66">（激活码将会发到您的邮箱中，只有激活账号才可以使用！）</td></tr>
<tr><td height="20"></td><td></td></tr>
<tr bgcolor="#EDEDED">
<td align="left" height="30" width="200">
<font color="#FF6600" size="2" style="font-weight:600;"> 用户信息</font></td>
<td align="right"></td></tr>
<tr><td height="20"></td><td></td></tr>
<tr>
<td height="35" align="right" class="tdtitle">性别：</td>
<td align="left"><input type="radio" id=user_sex name="user_sex" value="1" checked="checked" />男
<input type="radio" id=user_sex name="user_sex" value="0" />女
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle">出生日期：</td>
<td align="left"><!-- onfocus="WdatePicker({firstDayOfWeek:1})" onClick="WdatePicker()"
可以用这个设置开始的星期几 替换onClick()-->
<input type="text" class="Wdate" id=birthday name="birthday"
style="width:230px; height:20px;" onfocus="WdatePicker({skin:'blue'})" />
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle"><font color="red">* </font>所在城市：</td>
<td align="left" id="loc"><!--<input type="text" id=province name="province" style="width:230px; height:20px;">
--></td></tr>
<tr>
<td height="35" align="right" class="tdtitle">邮编：</td>
<td align="left"><input type="text" id=zipcode name="zipcode" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle"><font color="red">* </font>联系电话：</td>
<td align="left"><input type="text" class="required" id=telephone name="telephone" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle">密保问题：</td>
<td align="left"><input type="text" id=question name="question" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle">答案：</td>
<td align="left"><input type="text" id=answer name="answer" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle"><font color="red"> </font>注册条款：</td>
<td class="tdtitle"><input type="checkbox" id=remember value="" /> 我已仔细阅读并接受享购网注册条款</td></tr>
<tr><td height="20"></td><td></td></tr>
<tr><td height="25" colspan="2" align="center">
<input type="button" class="but1" id="butt1" value="注册">
<input type="reset" class="but1" id="butt2" value="重置"> </td></tr>
<tr><td height="15"></td><td></td></tr>
</tbody>
</table>
</form>
<?php require_once('footer.php'); ?>
</body>
</html>
#2
就是点击注册时检查是否所有的都已经符合要求！转向php页面那个就不用说了！！
#3
不改变你的架构的情况下 只需要增设一个全局变量, 设定初始值为true 在每1个判定条件下如果errorMsg了 就设定成false,在提交的时候判断是否为true true的话验证通过可以提交,false的话就不允许提交
#4
可以写下吗！！我刚学，写的我头都大了！！谢啦！！！
#6
可以用html5里面表单的新属性，可以参考一下w3school，那样在提交表单时就会检查是否全部都符合要求，不过可能有些浏览器不支持
#7
提交表单时，再验证
#8
谢谢你的文章，可以把源码发来我学习下吗！！我邮箱：849291170@qq.com，先谢啦！！
#9
麻烦再我的源码上改一下，我现在头很大的！！！！！！！！！先谢啦！！
#10
js检查代码改为函数！不符合条件就return false
form表单用加入onsubmit=“return 检查函数（）”
form表单用加入onsubmit=“return 检查函数（）”
#11
你可以这样写：
$('注册按钮').click(function(){
$("form :input").trigger('blur'); //先触发失去焦点事件，没有错误就注册成功了
var numError = $('form .onError').length;
if(numError){
return false;
}
//注册成功
});
还有，下面这个会不会更好呢？ 其中意思自己慢慢体会...
$("form :input").blur(function(){
。。。
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
$('注册按钮').click(function(){
$("form :input").trigger('blur'); //先触发失去焦点事件，没有错误就注册成功了
var numError = $('form .onError').length;
if(numError){
return false;
}
//注册成功
});
还有，下面这个会不会更好呢？ 其中意思自己慢慢体会...
$("form :input").blur(function(){
。。。
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
#12
谢谢啦！！！不胜感激！！！哈哈
#1
html表单代码：
<body>
<form method="post" action="RegisterAction.php">
<div id="top">
<p> <a href="index.php">享购首页</a>
<font color="red">您还未登陆！</font> |
<a href="login.php">登陆</a> |
<a href="Register.php">注册</a> | <a href="#">帮助</a> </p>
</div>
<div id="zhuce"><img src="images/zhuce2.gif" /></div>
<table id="loginTa" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#EDEDED">
<td align="left" height="30" width="200">
<font color="#FF6600" size="2" style="font-weight:600;"> 账号信息</font></td>
<td align="right"></td></tr>
<tr><td height="20"></td><td></td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>用户名：</td>
<td align="left"><input type="text" class="required" id=user_name name="user_name" style="width:230px; height:20px;">
</td></tr>
<tr><td height="20"></td><td class="td66">（6-10位字母、数字或下划线组合，首字符必须为字母。）</td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>密码：</td>
<td><input type="password" class="required" id=user_pwd name="user_pwd" style="width:230px; height:20px;"> </td></tr>
<tr><td height="20"></td><td class="td66"> （为了您的账号安全，强烈建议您的密码使用字母+数字等多种不同类型的组合，并且密码为6-25位。）</td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>再次输入密码：</td>
<td><input type="password" class="required" id=user_pwd2 name="user_pwd2" style="width:230px; height:20px;"> </td></tr>
<tr><td height="20"></td><td class="td66">（确保密码输入正确。）</td></tr>
<tr>
<td height="30" align="right" class="tdtitle"><font color="red">* </font>邮箱：</td>
<td><input type="text" class="required" id=email name="email" style="width:230px; height:20px;"> </td></tr>
<tr><td height="20"></td><td class="td66">（激活码将会发到您的邮箱中，只有激活账号才可以使用！）</td></tr>
<tr><td height="20"></td><td></td></tr>
<tr bgcolor="#EDEDED">
<td align="left" height="30" width="200">
<font color="#FF6600" size="2" style="font-weight:600;"> 用户信息</font></td>
<td align="right"></td></tr>
<tr><td height="20"></td><td></td></tr>
<tr>
<td height="35" align="right" class="tdtitle">性别：</td>
<td align="left"><input type="radio" id=user_sex name="user_sex" value="1" checked="checked" />男
<input type="radio" id=user_sex name="user_sex" value="0" />女
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle">出生日期：</td>
<td align="left"><!-- onfocus="WdatePicker({firstDayOfWeek:1})" onClick="WdatePicker()"
可以用这个设置开始的星期几 替换onClick()-->
<input type="text" class="Wdate" id=birthday name="birthday"
style="width:230px; height:20px;" onfocus="WdatePicker({skin:'blue'})" />
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle"><font color="red">* </font>所在城市：</td>
<td align="left" id="loc"><!--<input type="text" id=province name="province" style="width:230px; height:20px;">
--></td></tr>
<tr>
<td height="35" align="right" class="tdtitle">邮编：</td>
<td align="left"><input type="text" id=zipcode name="zipcode" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle"><font color="red">* </font>联系电话：</td>
<td align="left"><input type="text" class="required" id=telephone name="telephone" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle">密保问题：</td>
<td align="left"><input type="text" id=question name="question" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle">答案：</td>
<td align="left"><input type="text" id=answer name="answer" style="width:230px; height:20px;">
</td></tr>
<tr>
<td height="35" align="right" class="tdtitle"><font color="red"> </font>注册条款：</td>
<td class="tdtitle"><input type="checkbox" id=remember value="" /> 我已仔细阅读并接受享购网注册条款</td></tr>
<tr><td height="20"></td><td></td></tr>
<tr><td height="25" colspan="2" align="center">
<input type="button" class="but1" id="butt1" value="注册">
<input type="reset" class="but1" id="butt2" value="重置"> </td></tr>
<tr><td height="15"></td><td></td></tr>
</tbody>
</table>
</form>
<?php require_once('footer.php'); ?>
</body>
</html>
#2
就是点击注册时检查是否所有的都已经符合要求！转向php页面那个就不用说了！！
#3
不改变你的架构的情况下 只需要增设一个全局变量, 设定初始值为true 在每1个判定条件下如果errorMsg了 就设定成false,在提交的时候判断是否为true true的话验证通过可以提交,false的话就不允许提交
#4
可以写下吗！！我刚学，写的我头都大了！！谢啦！！！
#5
推荐用 jquery.validate.js,这个全部整合好了
http://www.cnblogs.com/easyit/articles/1733788.html
http://www.cnblogs.com/easyit/articles/1733788.html
#6
可以用html5里面表单的新属性，可以参考一下w3school，那样在提交表单时就会检查是否全部都符合要求，不过可能有些浏览器不支持
#7
提交表单时，再验证
#8
谢谢你的文章，可以把源码发来我学习下吗！！我邮箱：849291170@qq.com，先谢啦！！
#9
麻烦再我的源码上改一下，我现在头很大的！！！！！！！！！先谢啦！！
#10
js检查代码改为函数！不符合条件就return false
form表单用加入onsubmit=“return 检查函数（）”
form表单用加入onsubmit=“return 检查函数（）”
#11
你可以这样写：
$('注册按钮').click(function(){
$("form :input").trigger('blur'); //先触发失去焦点事件，没有错误就注册成功了
var numError = $('form .onError').length;
if(numError){
return false;
}
//注册成功
});
还有，下面这个会不会更好呢？ 其中意思自己慢慢体会...
$("form :input").blur(function(){
。。。
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
$('注册按钮').click(function(){
$("form :input").trigger('blur'); //先触发失去焦点事件，没有错误就注册成功了
var numError = $('form .onError').length;
if(numError){
return false;
}
//注册成功
});
还有，下面这个会不会更好呢？ 其中意思自己慢慢体会...
$("form :input").blur(function(){
。。。
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
#12
谢谢啦！！！不胜感激！！！哈哈