js校验服务器控件是否为空

控件检验分两步:选择和校验;对于服务器控件的选择,需要通过服务器id转换为客户端id之后,才能在js中操作。以下说明:

1 选择

html代码:

2
3
4
5
6
7
8
9
10
11
12
13
<body>
 
显示位置:
<asp:DropDownList ID="channelSel" runat="server">
     <asp:ListItem Value="" Selected>频道选择</asp:ListItem>      
    <asp:ListItem Value="Pro_NoteBook">笔记本频道</asp:ListItem>
    <asp:ListItem Value="Pro_Camera">数码相机频道</asp:ListItem>
    <asp:ListItem Value="Pro_Desktop">台式机频道</asp:ListItem>
 
</asp:DropDownList>
</body>

JS操作:

2
3
4
5
6
7
<script type="text/javascript">
    function ValidDrpList(){
        var chId = '<%=channelSel.ClientID %>';
        var chSel = document.getElementById(chId).value;
    }
</script>

使用ClientID属性转换为客户端ID,再通过document对象选中该元素;

2 校验

之后的校验没什么特别的,都一样:

2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    function ValidDrpList(){
        var chId = '<%=channelSel.ClientID %>';
        var chSel = document.getElementById(chId).value;
        if(chSel == ''){
             alert("请选择频道");
             return false;
        }
        return true;
    }
</script>

3 独立js文件

只有在本页面中才可以使用ClientID属性,因此,为了独立js文件,我们需要将ID值的转换与选择校验操作分离开来:

2
3
4
5
6
7
8
9
10
  <script type="text/javascript">
   function getNetID()
   {
   var proID = '<%=ProBtn.ClientID %>';//.net控件:用户名输入框
   var couID='<%=CBtn.ClientID %>';//.net控件:密码输入框
   var sellerID='<%=SBtn.ClientID %>';
   return {Id1:proID,Id2:couID,Id3:sellerID};//生成访问器,在.js文件中进行函数调用;
   }  
</script>

在页面中有了上述访问器,即可在js校验文件中操作:

**.js:

2
3
4
5
6
7
8
<script type="text/javascript">
        function ValidNull() {
          var con=document.getElementById(getNetID().Id1).value;
          ...
          return false;
        }
</script>

OVER!

More: http://blog.donews.com/me1105/archive/2011/04/23/151.aspx

posted @   大CC  阅读(1448)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
木书架 大CC的博客
点击右上角即可分享
微信分享提示