用JS验证TexBox问题。

[空白画映]

先上代码JS验证

<script language="javascript" type="text/javascript">
function checkNotnull()
{
var str = document.getElementById("TextBox1").value;
if(str.length ==0 && str=="")
{
alert("不能为空！")
return false;
}
else
{
return true;
}
}
</script>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" 
        OnClientClick="return checkNotnull()" onclick="Button1_Click1" />
/*后台代码*/
 protected void Button1_Click1(object sender, EventArgs e)
    {
        TextBox1.Text = "1234";

    }

验证代码写在button按钮事件里面验证

 protected void Button1_Click1(object sender, EventArgs e)
    {
        if (TextBox1.Text.Trim() == "" && TextBox1.Text.Length == 0)
        {
            Response.Write("<script>alert('不能为空！!')</script>");
 
        }

    }

问题1 把验证代码写在button按钮事件里面验证与JS验证那个好呢？
问题2 JS验证我点Button按钮后TextBox1的值为1234了而不是提示JS的验证脚本，当我把Texbox1里面的值删了之后在点按钮才有JS提示的脚本，我觉得是先执行onclick事件，不是先执行Onclientclick验证JS方法的属性，这是为什么呢？怎么才能先执行JS验证 之后在执行onclick事件， 因为这个按钮以后做登录按钮如果出现这种问题的话 那就先执登录的方法后执行JS验证了这就会出问题了！

[yongnicheng]

楼上的很强..

[空白画映]

大家针对我的我问题回答可以吗？
按道理说服务器按钮button1调用Javascript脚步中的函数CheckNotnull() 用到了return，函数返回false则不再执行服务器的的代码，OnClientClick优先与onclick事件！！！
但是我的却恰恰相反

[mngzilin]

我试了下，你的代码没问题，可能是和页面其他地方冲突了

[zcxverygood123456]

为何不考虑用ajax???

[bin0403]

<asp:TextBox ID="QATextBox" runat="server"></asp:TextBox><br />

<asp:RequiredFieldValidator SetFocusOnError="true" ID="RFVQATextBox" runat="server" ControlToValidate="QATextBox" Display="Dynamic" ErrorMessage="注释" ValidationGroup="Group1"></asp:RequiredFieldValidator>

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/img/QAButton.png" OnClick="ImageButton1_Click" ValidationGroup="Group1" />

[bin0403]

我的方法至少效果比alert时 背景空白要好。

[ailin84]

严格的验证应该是 js+服务端验证，不过现在很多开发都把服务器验证省略了

我发一个我目前写的验证吧，个人觉得这种验证还是能提高不少效率的

//用于表单验证
var Validate = {};

//用途：检查输入字符串是否为空或者全部都是空格 
Validate.isNull = function(str) {
    if (str == "") return true;
    var regu = "^[ ]+$";
    var re = new RegExp(regu);
    return re.test(str);
}

//用途：检查输入字符串是否符合正整数格式 
Validate.isNumber = function(s) {

    var regu = "^[0-9]+$";
    var re = new RegExp(regu);
    if (s.search(re) != -1) {
        return true;
    } else {
        return false;
    }
}

//用途：检查输入字符串是否是带小数的数字格式,可以是负数 
Validate.isDecimal = function(str) {

    if (Validate.isInteger(str)) return true;
    var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
    if (re.test(str)) {
        if (RegExp.$1 == 0 && RegExp.$2 == 0) return false;
        return true;

    } else {
        return false;
    }

}
//....其他验证省略

function GoValidate(tabid)
{
	
	var nodes=$("#" +tabid+" input[validate!='']");

	for(var j=0;j<nodes.length;j++)
	{
		     var v=$(nodes[j]).attr("validate").split(",");
			 var val=$(nodes[j]).val();
			 for(var i=0; i<v.length;i++)
			 {
				 var s=v[i];
				 switch (v[i])
				 {
					 case "notnull":
					 		if(Validate.isNull(val))
								 return  Tooltip("该项不能为空",nodes[j])
							break;
					 case "number":
					 		if(!Validate.isDecimal(val))
								return Tooltip("该项必须为数字",nodes[j])
							break;
					 case "date":
					 		if(!Validate.isDate(val))
								return Tooltip("该项必须为时间格式",nodes[j])
							break;
					case "phone":
					 		if(!Validate.isPhone(val))
								return Tooltip("该项必须为正确的电话格式",nodes[j])
							break;
				 }
				
			 }
		
	}
	return true;

}


function Tooltip(msg,obj)
{
	var o=$(obj).offset();
	$("#tooltip").html(msg).css("top",o.top-$(obj).height()-15).css("left",o.left+10).show();
	$(obj).focus();
	return false;
}

提交表单的时候执行 GoValidate("record")，会遍历id为record内的表单元素，比如input，如果有validate属性（比如 validate='notnull,integer' 文本框不能为空，且必须为整数），会执行相关的验证，验证不通过会弹出提示信息，返回false，使表单不能提交
tooltip是一个弹出层，会在验证不通过的时候，在验证的控件处弹出不通过的信息。

效果如图：

[空白画映]

顶出水面，继续回答！

[BaoShiqiang]

4楼的方法很好 谢谢分享

[w398687283]

mark

[asasday]

你用服务器控件验证的话！是要做提交事件的！！这样效果不好吧

[njxiaoxiong]

既然是用服务器端控件你的var str = document.getElementById("TextBox1").value;
要换成var str = document.getElementById("<%=TextBox1.ClientID%>").value;

[ljb8664]

你可以用textbox的onchange事件啊！

[dengtianyoulu]

4楼的学习了