asp.ne如何使用javascript去验证客户端信息,如果验证成功则送往服务器端处理,否则在客户端提示用户(不返回到服务器端处理)...

一、问题

        在网站一般都有很多地方需要用户去填写一些信息,然后用户点击提交,将信息送往后台储存到数据库中。在这一个过程我以前做法直接在button的click事件中来判断用户输入的数据是否完整和合法,虽然这样可以实现验证用户输入的信息,但是每次用户点击提交按钮时候页面都会刷新一次,这样对用户会造成比较差的体验。如果我们把用户验证消息这一步放到客户端,当用户输入正确的信息时候才提交到服务器去处理,否则不提交到服务器,也就是不刷新页面。

        这样实现的好处我认为有以下两点:1、有更好的用户体验。2、编写服务器端代码时候不会有一大推的逻辑验证的代码,让代码看起来更舒服、整洁(个人很讨厌这样很多验证信息的逻辑代码)

二、解决方案

        1、asp.net的button控件有两个事件

             a、onclick:在服务器端执行的代码(c#代码)。

             b、OnClientClick:在客户端执行的代码(javascript代码)

            这两个事件执行的先后的关系是,先执行OnClientClick事件,如果OnClientClick执行之后返回为true,再执行onclick代码,否则不执行onclick的代码,通过对这两个事件的分析我们就可以很容易的使用客户端的javascript的脚本对用户输入的信息进行验证了,如果验证通过了返回true,执行服务端的代码,否则不返回到服务器端。通过这两个事件就可以实现我们想要的效果了。

       2、接下来我们开始写代码吧。aspx的客户端代码如下。

            html:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" 
            OnClientClick ="return clientClick()" οnclick="Button1_Click" />
        <input id="txtName" type="text" />
    </div>
    </form>
</body>

 

    javascript:

 

function clientClick() {

            var el = document.getElementById("txtName");
            if (el.value == "") {
                alert("请输入用户名");
                return false;
            }
            return true;
        }
    </script>

         在写客户端代码有一个需要注意的地方,一般情况我们写html上的某个元素的事件执行函数一般是这样写的如:οnclick=“clickMethod”,根本不会再前面加上一个return,但是这个OnClientClick却不一样,如果你不加上return的话,即使你在javascript中的代码的返回值为false,当你点击提交了之后计算是它还是会执行服务器端的代码。所以在验证客户端信息的时候一定要在javascript的方法前面加上return。

         3.服务器的代码如下:

1 protected void Button1_Click(object sender, EventArgs e)
2         {
3             Response.Write("用户已经输入的用户名");
4         }
View Code

 

 

     只需要通过简单的三步就能实现在客户端验证用户输入的信息,只有当正确时候才会返回让服务器去处理。

     如果有些的不好的,或者是有什么不足的地方,希望各位能够能够指出来。谢谢。

三、引用

     参考:http://blog.163.com/xiao_mege/blog/static/72942753201072053841131/

 

转载于:https://www.cnblogs.com/mingjiatang/p/3671997.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值