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

最新推荐文章于 2021-09-07 21:58:37 发布

转载最新推荐文章于 2021-09-07 21:58:37 发布 · 94 阅读

文章标签：

#javascript #ViewUI

本文介绍如何在ASP.NET中通过JavaScript操作服务器控件，包括客户端ID转换、控件选择及校验流程，并提供分离ID转换与校验操作的方法以支持独立JS文件。

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

1 选择

html代码：

<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操作：

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

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

2 校验

之后的校验没什么特别的，都一样：

    <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值的转换与选择校验操作分离开来：

       <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:

<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