关于必填选项的提示，代码复用问题

VivianZhang_kid 2015-07-18 03:01:06

想做成一个类似于QQ注册界面的效果，就是当没有输入时，焦点移开后会出现提示信息：

但是我的代码中函数功能里面写有了textbox1、lable1之类的，想直接用在textbox2和lable2等等之类的.....因为表单里面涉及的textbox和lable数目比较多，所以想请教一下如何修改function，使得可以直接



<html xmlns="http://www.w3.org/1999/xhtml" > 

<head id="Head1" runat="server"> 

<title>无标题页</title> 

<script language="javascript" type="text/javascript">

    //焦点移除后显示不可为空且文本框变红色

    function losefocus(textbox) {

        var name = document.getElementById('<%=TextBox1.ClientID %>').value;

        if (name.length <= 0) {

        var watermarkText = "输入名称"; 

        textbox.style.color = "gray"; 

        textbox.value = watermarkText; 

            document.getElementById('<%=Label1.ClientID %>').innerText = "该项目不可以为空"

            document.getElementById('<%=TextBox1.ClientID %>').style.border = "solid 1px red";

            return false;

        }

        else {

            return true;

        }

    }

    function losefocus2(textbox) {

        var name = document.getElementById('<%=TextBox2.ClientID %>').value;

        if (name.length <= 0) {

            var watermarkText = "输入名称";

            textbox.style.color = "gray";

            textbox.value = watermarkText;

            document.getElementById('<%=Label2.ClientID %>').innerText = "该项目不可以为空"

            document.getElementById('<%=TextBox2.ClientID %>').style.border = "solid 1px red";

            return false;

        }

        else {

            return true;

        }

    }

    //定位光标

    function start() {

        document.getElementById('TextBox1').focus();

    }

</script>

</head> 

<body  onload="start();"> 

<form id="form1" runat="server"> 

<asp:TextBox ID="TextBox1" runat="server" onblur="losefocus(this);" 

    ></asp:TextBox> 

<asp:Label ID="Label1" runat="server" Text="*" ForeColor="Red"></asp:Label>

<div> 

<asp:TextBox ID="TextBox2" runat="server" onblur="losefocus2(this);" 

    ></asp:TextBox> 

<asp:Label ID="Label2" runat="server" Text="*" ForeColor="Red"></asp:Label> 

</div>

</form> 

</body> 

</html>