步骤一的内容有商家名称,密码,重复密码,email,qq等。
4 个解决方案
#1
都在表单中验证,如果是对前两个div的验证,全return false就可以了,第一个div通过,了第二个display设为block,第一个为none,第二个同样
只有第三个才检验是否正的通过,通过return true
只有第三个才检验是否正的通过,通过return true
#2
谢谢1楼的回答先,这是我从jsp页面简化出来的代码,这是form里DIV和table的分布,有点多
<form id="regForm" name="regForm" action="" method="post">
<div id="divStep1" class="PopWindow" >
<table class="head_table" width="800" height="498">
<tr style="background-color:#09F; color:#FFF; width:100%;">
<td>
<b>商家注册</b>
</td>
</tr>
<tr>
<td>
<div class="content_div">
<table class="con_table" width="786" height="365">
<tr style=" background-color:#ccecff; color:#FFF; font-weight:bold;">
<td style="text-align:left;">
步骤1:商家注册
</td>
<td style="text-align:right">
步骤1(共3步)
</td>
</tr>
<tr style=" height:40px; color:red; font-weight:bold;">
<td colspan="2">
温馨提示:请确保您的必填注册信息真实、全面、有效,否则确认无效的注册信息将被自动删除。
</td>
</tr>
<tr style=" text-align:left;" class="require" >
<td>
请输入贵单位的信息
</td>
<td style="text-align:left;" >
<span style="color:red;">*</span>必填信息
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top;">
<table class="" width="724" >
<tr>
<td style="width:130px;" class="require">
商家名称:
</td>
<td class="require" style="text-align:left">
<input id="ei_CompanyName" type="text" class="underLine" name="t_Base_EnterpriseBaseInfo.ei_CompanyName" size="30" maxlength="100" title="请输入贵企业的名称,最长不能超过50个汉字" />
<span style="color:red">*</span>
</td>
<td style="width:95px;" class="require">
商家昵称:
</td>
<td class="require" style="text-align:left">
<input id="ei_Name" type="text" class="underLine" name="t_Base_EnterpriseBaseInfo.ei_Name" size="20" maxlength="40" title="请输入登录系统的昵称,最长不能超过20个字符" />
<span style="color:red">*</span>
</td>
</tr>
<tr>
<td style="width:130px;" class="require">
商家密码:
</td>
<td class="require" style="text-align:left">
<input id="ei_Pass" type="password" class="underLine" name="t_Base_EnterpriseBaseInfo.ei_Pass" size="30" maxlength="20" title="请输入登录系统的密码,最长不能超过20个字符" />
<span style="color:red">*</span>
</td>
</tr>
<tr>
<td style="width:130px;" class="require">
确认密码:
</td>
<td class="require" style="text-align:left">
<input id="ei_Pass1" type="password" class="underLine" size="30" maxlength="20" title="请再次输入登录系统的密码,最长不能超过20个字符" />
<span style="color:red">*</span>
</td>
</tr>
<tr style="height:60px;">
<td colspan="4" align="center">
<input type="button" value="保存进入下一步" style="background-color:blue; color:white; height:30px;" onclick="javascript:showDivStep2();" />
<input type="button" value=" 取消 " style="background-color:blue; color:white; height:30px;" onclick="javascript:window.close();" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="divStep2" class="PopWindow" style="display:none" >
<table class="2_table">
<tr style="background-color:#09F; color:#FFF; width:100%;">
<td>
<b>商家注册</b>
</td>
</tr>
<tr>
<td>
<div class="content_div">
<table class='con_table'>
<tr style=" background-color:#ccecff; color:#FFF; font-weight:bold;">
<td style="text-align:left;">
步骤2:服务协议
</td>
<td style="text-align:right">
步骤2(共3步)
</td>
</tr>
<tr style="height:50px; color:red; font-weight:bold;">
<td colspan="2">
温馨提示:请详细阅读用户协议。
</td>
</tr>
<tr style=" text-align:left;" class="require" >
<td>
服务协议
</td>
<td style="text-align:left;">
<span style="color:red;">*</span>必填信息
</td>
</tr>
<tr style="height:10px;">
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td style="width:160px; height:300px;" class="noRequire">
协议<br/>内容
</td>
<td class="noRequire" style="text-align:left" colspan="3">
<textarea style=" overflow-x:hidden; width:560px; height:300px;">
。。。。。协议。。。。。
</textarea>
</td>
</tr>
<tr>
<td style="width:100px;" class="require">
是否同意
</td>
<td class="require" style="text-align:left" colspan="3">
<input id="chkAggreement" type="checkbox" value="同意以上协议" checked="checked" onclick="disAggreement();"/> 同意以上协议
</td>
</tr>
</table>
</td>
</tr>
<tr style="text-align:center;">
<td colspan="4" align="center">
<input id="btnAggreement" type="button" value="同意条款提交注册" onclick="javascript:showDivStep3();" style="background-color:blue; color:white; height:30px;"/>
<input type="button" value=" 返回 " onclick = "javascript:showDivStep1();" style="background-color:blue; color:white; height:30px;"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</form>
#3
这是一段script代码,写进页面为什么会没反应,要改什么,插件已经引用
// JavaScript Document
$(document).ready(function()
{
$("#regForm").validate(
{
//指定触发效验的方式
event:"kryup" || "blur",
//制定验证规则
rules:{
ei_CompanyName:{
required:true,
maxlength:100
},
ei_Name:{
required:true,
maxlength:40
},
ei_Amount: {
requied:true,
digits: true,
range:[1,99]
},
ei_Address: "required",
ei_Pass:{
required:true,
rangelength:[5,20]
},
ei_Pass1:{
required:true,
equalTo:"#ei_Pass"
},
ei_Mobile:{
required:true,
Mobile:true,
maxlength:15
},
ei_QQ:{
QQ:true
},
ei_Email:{
email:true
},
ei_Tel:{
Phone:true
},
//自定义提示消息
messages:{
ei_CompanyName:{
required:"请输入您的商家名称",
maxlength:jquery.format("商家名称不能超过50个字")
},
ei_Name:{
required:"请输入商家昵称",
maxlength:jquery.format("商家昵称不能超过20个字")
},
ei_Amount:{
required:"请输入门店数量",
range:jquery.format("门店数量最长不超过2位数")
},
ei_Address:"请输入商家地址",
ei_QQ:{ QQ:"QQ号格式有误" },
ei_Tel:{ Phone:"电话号码格式有误"},
ei_Email:{ email:"Email格式有误" },
ei_Paass1:{ required:"请输入确认密码",
equalTo:"两次输入的密码不一致"
},
ei_Pass:{
required:"请输入密码",
minlength:jquery.format("密码不能小于{0}位"),
maxlength:jquery.format("密码不能超过{1}位")
},
ei_Mobile:{
required:"请输入如手机号码",
Mobile:"手机号码格式有误",
maxlength:jquery.format("最长不得超过15位")
}
},
//验证消息放置的位置
errorPlacement:function(){
error.appendTo(element.parent("td").next("td"));
},
//对验证的表单设置高亮
highlight:function(){
$element.addClass(errorClass);
},
success:function(label){
label.addClass("valid").text("OK!")
}
}
});
})
#4
只要指定到具体的id属性就行了
#1
都在表单中验证,如果是对前两个div的验证,全return false就可以了,第一个div通过,了第二个display设为block,第一个为none,第二个同样
只有第三个才检验是否正的通过,通过return true
只有第三个才检验是否正的通过,通过return true
#2
谢谢1楼的回答先,这是我从jsp页面简化出来的代码,这是form里DIV和table的分布,有点多
<form id="regForm" name="regForm" action="" method="post">
<div id="divStep1" class="PopWindow" >
<table class="head_table" width="800" height="498">
<tr style="background-color:#09F; color:#FFF; width:100%;">
<td>
<b>商家注册</b>
</td>
</tr>
<tr>
<td>
<div class="content_div">
<table class="con_table" width="786" height="365">
<tr style=" background-color:#ccecff; color:#FFF; font-weight:bold;">
<td style="text-align:left;">
步骤1:商家注册
</td>
<td style="text-align:right">
步骤1(共3步)
</td>
</tr>
<tr style=" height:40px; color:red; font-weight:bold;">
<td colspan="2">
温馨提示:请确保您的必填注册信息真实、全面、有效,否则确认无效的注册信息将被自动删除。
</td>
</tr>
<tr style=" text-align:left;" class="require" >
<td>
请输入贵单位的信息
</td>
<td style="text-align:left;" >
<span style="color:red;">*</span>必填信息
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top;">
<table class="" width="724" >
<tr>
<td style="width:130px;" class="require">
商家名称:
</td>
<td class="require" style="text-align:left">
<input id="ei_CompanyName" type="text" class="underLine" name="t_Base_EnterpriseBaseInfo.ei_CompanyName" size="30" maxlength="100" title="请输入贵企业的名称,最长不能超过50个汉字" />
<span style="color:red">*</span>
</td>
<td style="width:95px;" class="require">
商家昵称:
</td>
<td class="require" style="text-align:left">
<input id="ei_Name" type="text" class="underLine" name="t_Base_EnterpriseBaseInfo.ei_Name" size="20" maxlength="40" title="请输入登录系统的昵称,最长不能超过20个字符" />
<span style="color:red">*</span>
</td>
</tr>
<tr>
<td style="width:130px;" class="require">
商家密码:
</td>
<td class="require" style="text-align:left">
<input id="ei_Pass" type="password" class="underLine" name="t_Base_EnterpriseBaseInfo.ei_Pass" size="30" maxlength="20" title="请输入登录系统的密码,最长不能超过20个字符" />
<span style="color:red">*</span>
</td>
</tr>
<tr>
<td style="width:130px;" class="require">
确认密码:
</td>
<td class="require" style="text-align:left">
<input id="ei_Pass1" type="password" class="underLine" size="30" maxlength="20" title="请再次输入登录系统的密码,最长不能超过20个字符" />
<span style="color:red">*</span>
</td>
</tr>
<tr style="height:60px;">
<td colspan="4" align="center">
<input type="button" value="保存进入下一步" style="background-color:blue; color:white; height:30px;" onclick="javascript:showDivStep2();" />
<input type="button" value=" 取消 " style="background-color:blue; color:white; height:30px;" onclick="javascript:window.close();" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="divStep2" class="PopWindow" style="display:none" >
<table class="2_table">
<tr style="background-color:#09F; color:#FFF; width:100%;">
<td>
<b>商家注册</b>
</td>
</tr>
<tr>
<td>
<div class="content_div">
<table class='con_table'>
<tr style=" background-color:#ccecff; color:#FFF; font-weight:bold;">
<td style="text-align:left;">
步骤2:服务协议
</td>
<td style="text-align:right">
步骤2(共3步)
</td>
</tr>
<tr style="height:50px; color:red; font-weight:bold;">
<td colspan="2">
温馨提示:请详细阅读用户协议。
</td>
</tr>
<tr style=" text-align:left;" class="require" >
<td>
服务协议
</td>
<td style="text-align:left;">
<span style="color:red;">*</span>必填信息
</td>
</tr>
<tr style="height:10px;">
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td style="width:160px; height:300px;" class="noRequire">
协议<br/>内容
</td>
<td class="noRequire" style="text-align:left" colspan="3">
<textarea style=" overflow-x:hidden; width:560px; height:300px;">
。。。。。协议。。。。。
</textarea>
</td>
</tr>
<tr>
<td style="width:100px;" class="require">
是否同意
</td>
<td class="require" style="text-align:left" colspan="3">
<input id="chkAggreement" type="checkbox" value="同意以上协议" checked="checked" onclick="disAggreement();"/> 同意以上协议
</td>
</tr>
</table>
</td>
</tr>
<tr style="text-align:center;">
<td colspan="4" align="center">
<input id="btnAggreement" type="button" value="同意条款提交注册" onclick="javascript:showDivStep3();" style="background-color:blue; color:white; height:30px;"/>
<input type="button" value=" 返回 " onclick = "javascript:showDivStep1();" style="background-color:blue; color:white; height:30px;"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</form>
#3
这是一段script代码,写进页面为什么会没反应,要改什么,插件已经引用
// JavaScript Document
$(document).ready(function()
{
$("#regForm").validate(
{
//指定触发效验的方式
event:"kryup" || "blur",
//制定验证规则
rules:{
ei_CompanyName:{
required:true,
maxlength:100
},
ei_Name:{
required:true,
maxlength:40
},
ei_Amount: {
requied:true,
digits: true,
range:[1,99]
},
ei_Address: "required",
ei_Pass:{
required:true,
rangelength:[5,20]
},
ei_Pass1:{
required:true,
equalTo:"#ei_Pass"
},
ei_Mobile:{
required:true,
Mobile:true,
maxlength:15
},
ei_QQ:{
QQ:true
},
ei_Email:{
email:true
},
ei_Tel:{
Phone:true
},
//自定义提示消息
messages:{
ei_CompanyName:{
required:"请输入您的商家名称",
maxlength:jquery.format("商家名称不能超过50个字")
},
ei_Name:{
required:"请输入商家昵称",
maxlength:jquery.format("商家昵称不能超过20个字")
},
ei_Amount:{
required:"请输入门店数量",
range:jquery.format("门店数量最长不超过2位数")
},
ei_Address:"请输入商家地址",
ei_QQ:{ QQ:"QQ号格式有误" },
ei_Tel:{ Phone:"电话号码格式有误"},
ei_Email:{ email:"Email格式有误" },
ei_Paass1:{ required:"请输入确认密码",
equalTo:"两次输入的密码不一致"
},
ei_Pass:{
required:"请输入密码",
minlength:jquery.format("密码不能小于{0}位"),
maxlength:jquery.format("密码不能超过{1}位")
},
ei_Mobile:{
required:"请输入如手机号码",
Mobile:"手机号码格式有误",
maxlength:jquery.format("最长不得超过15位")
}
},
//验证消息放置的位置
errorPlacement:function(){
error.appendTo(element.parent("td").next("td"));
},
//对验证的表单设置高亮
highlight:function(){
$element.addClass(errorClass);
},
success:function(label){
label.addClass("valid").text("OK!")
}
}
});
})
#4
只要指定到具体的id属性就行了