Jquery验证只能验证表单吗,能验证表单里指定的DIV吗

时间:2022-11-07 12:11:21
   我现在要在注册页面上用Jquery写个验证,在网上看了好像都是整个表单的验证,我的页面里一个form分三步显示,用DIV分成3个注册步骤(第一个填写结束后点击下一步,验证成功的话,第一个DIV会被隐藏,显示第二个DIV的内容,每个DIV里面是一张表),怎样不提交表单,只验证 第一个DIV(步骤一)的内容呢?
  步骤一的内容有商家名称,密码,重复密码,email,qq等。

4 个解决方案

#1


都在表单中验证,如果是对前两个div的验证,全return false就可以了,第一个div通过,了第二个display设为block,第一个为none,第二个同样
只有第三个才检验是否正的通过,通过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();" />
                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <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属性就行了 Jquery验证只能验证表单吗,能验证表单里指定的DIV吗

#1


都在表单中验证,如果是对前两个div的验证,全return false就可以了,第一个div通过,了第二个display设为block,第一个为none,第二个同样
只有第三个才检验是否正的通过,通过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();" />
                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <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属性就行了 Jquery验证只能验证表单吗,能验证表单里指定的DIV吗