多个文本框的JavaScript验证 [英] Javascript Validation of Multiple Textboxes

问题描述

我在asp.net页面上有3个文本框和一个按钮:
三个文本框旁边有3个标签
我希望javascript代码在单击按钮时验证这些文本框.
我需要的方式是单击按钮，空白字段旁边的所有标签都可见.即；我只填写了一个字段并单击了按钮，然后两个空白文本框旁边的2个标签都可见了.
当我在一个空白的文本框中输入内容时，LABEL应该不可见
我通过Google搜索使用了多种方法，但没有得到实际的结果

请帮助我做到这一点

I have 3 TEXTBOXES and a BUTTON in an asp.net page:
There are 3 LABELS next to the three TEXTBOXES
I want the javascript code to validate those textboxes on button click.
The way i need is on button click,all the lables next to BLANK fields becomes visible.ie;I filled only one field and clicked button,then the 2 Lables next to two blank textboxes becomes visible.
when i enter on a blank textbox,the LABEL should become invisible
I used many way to do it through google search,but i didnt get the actual one

please help me to do it

推荐答案

<script type="text/javascript">
    function validate()
    {
            if (document.getElementById('<%=txtUname.ClientID%>').value == "")
        {
                    document.getElementById('<%=lblUname.ClientID%>').visible = true;
                    document.getElementById('<%=txtUname.ClientID%>').focus();
                    return false;
                }
                return true;
        }
</script>

致电

Call

OnClientClick="return validate();"

对于我在空白文本框中输入，标签应该不可见"部分
使用onfocus事件并调用visible = false;它会工作.
始终先尝试.

For "i enter on a blank textbox,the LABEL should become invisible " part
use onfocus event and call the visible = false; it will work.
Always try first.

您正在寻找的是:必填字段验证器
您去了:
必需的字段验证器控件示例 [验证-RequiredFieldValidator [ ASP.NET RequiredFieldValidator控件 [

What you are looking for is: Required Field Validator
Here you go:
Required Field Validator Control Sample[^]
Validation - RequiredFieldValidator[^]
ASP.NET RequiredFieldValidator Control[^]

OR

Alternatively, you can do the same by placing your own logic and code on server side in button click.
Steps:
1. On postback, button click, check for textbox content
2. If there is no text then set the label visible proerty to true
3. Repeat 1 & 2 for other 2 textboxes.

嗨
Sandeep的答案是正确的.但是严格来说，如果您想使用JavaScript来执行此操作，那么这里是示例.

您不应该挑战任何人，因为您什么都说不了.

如果您正在使用母版和客户端，则需要在母版页的页眉中具有脚本，否则需要使用RegisterClientScript方法进行注入.

例如，在网站管理员的标题部分中有此内容..

从此处开始，文本框和标签将无法访问(位于内容页面中)，您需要获取ID并进行搜索

Hi
Sandeep''s answer is correct. But strictly if you want to have javascript to do this then here is the example.

You should not challenge any one, because there nothing you can say impossible.

If you are using master and client then you need to have the scripts at Master page''s header, otherwise need to inject using the RegisterClientScript method.

so as an example have this at the site master''s header section..

As from there the text box and labels not accessible (which are in the content page) you need to get the ID and search for it

<script type="text/javascript"">
  function validateThreeBoxes(boxID1, labelID1, boxID2, labelID2, boxID3, labelID3) {
        if (document.getElementById(boxID1).value == "") {
            document.getElementById(labelID1).style.visibility = "visible";
        }
        if (document.getElementById(boxID2).value == "") {
            document.getElementById(labelID2).style.visibility = "visible";
        }
        if (document.getElementById(boxID3).value == "") {
            document.getElementById(labelID3).style.visibility = "visible";
        }
    }

    </script>

aspx页面可以有这样的内容....

The aspx page can have like this....

<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Label ID="Label1" runat="server" Text="Text1 Should Not be Empty" style="visibility:hidden"></asp:Label>
</div>
<div>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Label ID="Label2" runat="server" Text="Text2 Should Not be Empty" style="visibility:hidden"></asp:Label>
</div>
<div>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:Label ID="Label3" runat="server" Text="Text3 Should Not be Empty" style="visibility:hidden"></asp:Label>
</div>
    <input type="button" id="Button1" runat="server"  value="Button1" />

在页面加载事件中...

At the page load event...

protected void Page_Load(object sender, EventArgs e)
{
    string textbox1Id = TextBox1.ClientID;
    string label1Id = Label1.ClientID;
    string textbox2Id = TextBox2.ClientID;
    string label2Id = Label2.ClientID;
    string textbox3Id = TextBox3.ClientID;
    string label3Id = Label3.ClientID;
    Button1.Attributes.Add("onclick", "validateThreeBoxes('" + textbox1Id + "','" + label1Id + "','"  + textbox2Id + "','" + label2Id + "','" + textbox3Id + "','" + label3Id + "');");
}

现在您可以看到它正在工作..

now you can see it working..

这篇关于多个文本框的JavaScript验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！