请选择汽车类型:

ASP.NET jQuery 食谱18 (通过使用jQuery valida

系统 1476 0

这节我们还可以通过直接设置DropDownList属性来设置jQuery validation插件的校验规则和提示信息。

先看界面代码:

      
        <
      
      
        form 
      
      
        id
      
      
        ="form1"
      
      
         runat
      
      
        ="server"
      
      
        >
      
      
< div align ="center" >
< fieldset style ="width: 350px; height: 200px;" >
< table border ="0" cellpadding ="3" cellspacing ="3" >
< tr >
< td >
请选择汽车类型:
</ td >
</ tr >
< tr >
< td >
< asp:DropDownList ID ="dllCar" runat ="server" ToolTip ="至少选择一种车!" CssClass ="required" >
< asp:ListItem Value ="" Text ="---请选择---" ></ asp:ListItem >
< asp:ListItem Value ="1" Text ="奔驰汽车" ></ asp:ListItem >
< asp:ListItem Value ="2" Text ="宝马汽车" ></ asp:ListItem >
< asp:ListItem Value ="3" Text ="奥迪汽车" ></ asp:ListItem >
< asp:ListItem Value ="4" Text ="现代汽车" ></ asp:ListItem >
< asp:ListItem Value ="5" Text ="丰田汽车" ></ asp:ListItem >
</ asp:DropDownList >
</ td >
</ tr >
< tr >
< td >
< asp:Button ID ="btnSubmit" runat ="server" Text ="提交" />
</ td >
</ tr >
</ table >
</ fieldset >
< div id ="message" class ="alertmsg" >
</ div >
</ div >
</ form >

DropDownList控件属性ToolTip会转换为Title,title的值可以作为校验规则required的提示信息,属性CssClass的值required就指定了插件的校验规则。

脚本代码:

      
        <
      
      
        head 
      
      
        id
      
      
        ="Head1"
      
      
         runat
      
      
        ="server"
      
      
        >
      
      
< title > Recipe18 </ title >
< script type ="text/javascript" src ="Scripts/jquery-1.4.1-vsdoc.js" ></ script >
< script type ="text/javascript" src ="Scripts/jquery.validate.js" ></ script >
< script type ="text/javascript" >
$(
function () {
$(
" #form1 " ).validate({
errorLabelContainer: $( " #message " )
});
});
</ script >
< style type ="text/css" >
.alertmsg
{
color
: #FF0000 ;
}
</ style >
</ head >

显示效果:

ASP.NET jQuery 食谱18 (通过使用jQuery validation插件校验DropDownList)_第1张图片

另外如果不设置DropDownList的属性ToolTip和CssClass,脚本代码改为如下,也可以实现同样的效果:

      
        <
      
      
        script 
      
      
        type
      
      
        ="text/javascript"
      
      
        >
      
      
        
$(
function () {
$(
" #form1 " ).validate({
rules: { dllCar:
" required " },
messages: { dllCar:
" 至少选择一种车! " },
errorLabelContainer: $(
" #message " )
});
});
</ script >



 




ASP.NET jQuery 食谱18 (通过使用jQuery validation插件校验DropDownList)


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论