OnClientClick和OnClick同时使用!

简介: 其实有的时候需要客户端和服务端双重校验,为什么这么说呢? 比果说,一个用户名的文本框,在客户端我们通过JS校验,只能输入字母和数字,不能有特殊字符!通常情况下是没有问题的,但是总有那么一丢丢人想方设法的去“搞破坏” ,这个时候就需要进行双重校验了!说白了,就是服务端和客户端都进么校验!比如说:Bu...

其实有的时候需要客户端和服务端双重校验,为什么这么说呢? 比果说,一个用户名的文本框,在客户端我们通过JS校验,只能输入字母和数字,不能有特殊字符!通常情况下是没有问题的,但是总有那么一丢丢人想方设法的去“搞破坏” ,这个时候就需要进行双重校验了!说白了,就是服务端和客户端都进么校验!

比如说:Button有:OnClick事件和OnClientClick属性,前者一般就是服务端的点击事件!后者则是客户端的点击事件!

我们来做一个测试!在Default.aspx页面中添加如下代码!

 

     < script language = " javascript "  type = " text/javascript " >
        
function  buttonClick() {
            alert(
" 我是客户端点击事件 " );
            
return   false ;     
        }

     </script> 

页面代码:

  < form id = " form1 "  runat = " server " >
    
< div >
        
< asp:Button ID = " Button1 "  runat = " server "  Text = " 些Button是服务端控件,默认使用OnClientClick事件,请禁用浏览器的Js功能体验 "
            OnClick
= " Button1_Click "  OnClientClick = " return buttonClick(); "   />
        
< asp:Label ID = " Label1 "  runat = " server "  Text = "" ></ asp:Label >
    
</ div >

   </form> 

cs文件代码:

protected   void  Button1_Click( object  sender, EventArgs e)
{
     this .Label1.Text  =   " 我是服务端点击事件 " ;

} 


大家运行看看是什么效果?  你可能会发现,只弹出了JS中的代码! 没错,这正是我们想要的效果,通过return false 来"屏蔽"服务端的校验!好处是什么? 就是不用刷新页面呀!

你再把浏览器的脚本功能禁用了,你再试一试,看看又是什么效果?

呵呵,通过又重校验就能确保用户的非法录入,这正是我们想要的结果! 

 

目录
相关文章
|
7月前
|
JavaScript 前端开发
事件绑定(onclick,onfocus,onblur)
事件绑定(onclick,onfocus,onblur)
89 0
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2912 0
Element el-button 按钮组件详解
|
1月前
|
设计模式 JavaScript 前端开发
addEventlistener和正常的onclick=()=> 的区别
【10月更文挑战第29天】`addEventListener` 是一种更推荐的添加事件处理函数的方式,它提供了更好的灵活性、可维护性和代码结构,能够满足复杂的事件处理需求,而 `onclick` 属性则更适合简单的、一次性的事件绑定场景,且在现代的JavaScript开发中,应尽量避免在HTML中直接使用 `onclick` 属性,以提高代码的质量和可维护性。
|
开发者 Python
Click使用|学习笔记
快速学习Click使用
228 0
Click使用|学习笔记
|
JavaScript
Vue的@click、@click.prevent、@click.stop
Vue的@click、@click.prevent、@click.stop
|
JavaScript
关于button的小问题
本文主要讲关于button的小问题
|
内存技术 数据格式 XML