以前由于对js等客户端技术不了解,做什么事都提交到服务器,增加了服务器的负担不说,还会出现一些问题,如:提交表单的时候如果提交的内容不全或内容有错误,就要提示用户,以前我一直是在服务器端做这些工作的,用的语句诸如:
if(xxx)//表单信息不全或存在错误信息
{
Response.Wrete("<script>window.alert('您输入的信息不全或有错误');</script>");
}
用这种语句最大的问题是,用户在后退到(或刷新)一个曾经弹出过警告框的页面时,这个警告框又会弹出来!
最近在一个页面要用到搜索功能时,就是用这种方式处理文本框为空用户就点击搜索时的情况.后来发现上面说的那个问题,才启发我用到js来完成搜索功能.用js做这个功能可以减少服务器的负担,避免了上面说的那个重复弹出警告窗口,还有用户在文本框输入完成直接点回车就可以搜索,不需要再用鼠标来点击一下按钮了.下面贴出代码:
function clickMouse() //用鼠标单击搜索按钮事件的处理函数
{
var b=document.getElementById("tKey");
if(b.value=="")
alert('请输入内容');
else
{
var re=/^\w+$/gi;
var flag=re.test(b.value);//这里判断用户输入的字符中是否有非法字符,可以根据需求写不同的正则
if(flag)
location.href="Search_List.aspx?Code="+b.value; //如果未含非法字符则转向搜索页面
else
alert('无效字符');
}
}
function clickKey() //按下键盘键事件时的处理函数
{
var iKey=document.all?event.keyCode:arguments[0].keyCode; //根据不同浏览器获取相应按键代码(ie与firefox)
if(iKey==13)//判断按下的键是否为回车
{
var btn=document.getElementById("Button1");
btn.click();//按下回车键相当于用鼠标点击了搜索按钮,所以只里只是触发了按钮的click事件
return false;
}
}
function cleanValue()//这个函数用于清空文本框内默认的提示信息
{
var a=document.getElementById("tKey");
a.value="";
}
//三个都是html控件 文本域我设了个默认值:Please input code用于提示
<input id="tKey" value="Please input code" type="text" />
<input id="hiddentext" type="text" style="display: none" />
<input id="Button1" type="button" value="搜索" /></div>
代码不多,且都是些最简单的语法,作用却挺大的.我在写的过程中也遇到了几个问题:
遇到的第一个问题是浏览器的兼容问题,ie和firefox是不同的.我用了一个语句:
document.all?event.keyCode:arguments[0].keyCode;来完成
document.all是只有在IE中才有的,所有它为空就不是IE了
ie 中或取键盘键值直接用event.keyCode就可以,但firefox中却要传一个参数过来才行 clickKey(event);
第二个问题是在.net中如果页面只有一个文本域,则按下回车键默认会提交到服务器,即使在客户端做了处理还是会提交过去,如果有两个文本域就不会发生这个现象.为了防止弹出窗口时也刷新页面,我放了一个隐藏的文本域
<input id="hiddentext" type="text" style="display: none" />
ok,就这么多了!
if(xxx)//表单信息不全或存在错误信息
{
Response.Wrete("<script>window.alert('您输入的信息不全或有错误');</script>");
}
用这种语句最大的问题是,用户在后退到(或刷新)一个曾经弹出过警告框的页面时,这个警告框又会弹出来!
最近在一个页面要用到搜索功能时,就是用这种方式处理文本框为空用户就点击搜索时的情况.后来发现上面说的那个问题,才启发我用到js来完成搜索功能.用js做这个功能可以减少服务器的负担,避免了上面说的那个重复弹出警告窗口,还有用户在文本框输入完成直接点回车就可以搜索,不需要再用鼠标来点击一下按钮了.下面贴出代码:
function clickMouse() //用鼠标单击搜索按钮事件的处理函数
{
var b=document.getElementById("tKey");
if(b.value=="")
alert('请输入内容');
else
{
var re=/^\w+$/gi;
var flag=re.test(b.value);//这里判断用户输入的字符中是否有非法字符,可以根据需求写不同的正则
if(flag)
location.href="Search_List.aspx?Code="+b.value; //如果未含非法字符则转向搜索页面
else
alert('无效字符');
}
}
function clickKey() //按下键盘键事件时的处理函数
{
var iKey=document.all?event.keyCode:arguments[0].keyCode; //根据不同浏览器获取相应按键代码(ie与firefox)
if(iKey==13)//判断按下的键是否为回车
{
var btn=document.getElementById("Button1");
btn.click();//按下回车键相当于用鼠标点击了搜索按钮,所以只里只是触发了按钮的click事件
return false;
}
}
function cleanValue()//这个函数用于清空文本框内默认的提示信息
{
var a=document.getElementById("tKey");
a.value="";
}
//三个都是html控件 文本域我设了个默认值:Please input code用于提示
<input id="tKey" value="Please input code" type="text" />
<input id="hiddentext" type="text" style="display: none" />
<input id="Button1" type="button" value="搜索" /></div>
代码不多,且都是些最简单的语法,作用却挺大的.我在写的过程中也遇到了几个问题:
遇到的第一个问题是浏览器的兼容问题,ie和firefox是不同的.我用了一个语句:
document.all?event.keyCode:arguments[0].keyCode;来完成
document.all是只有在IE中才有的,所有它为空就不是IE了
ie 中或取键盘键值直接用event.keyCode就可以,但firefox中却要传一个参数过来才行 clickKey(event);
第二个问题是在.net中如果页面只有一个文本域,则按下回车键默认会提交到服务器,即使在客户端做了处理还是会提交过去,如果有两个文本域就不会发生这个现象.为了防止弹出窗口时也刷新页面,我放了一个隐藏的文本域
<input id="hiddentext" type="text" style="display: none" />
ok,就这么多了!