javascript 表单验证和button跳转
2011-05-02 16:25
190 查看
我们设计一个表单，在本地客户端验证，如果验证不对的话，就不允许提交，非得全部验证完整正确才允许跳转
1、javascript 代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>JavaScript禁止提交表单</title>
<script type="text/javascript">
function getObj(id){
var Obj = document.getElementById(id).value;
return Obj;
}
function check(){
if(getObj("test")==""){
alert("文本框输入为空，不能提交表单！");
document.getElementById("test").focus;
return false;//false:阻止提交表单
}
}
</script>
</head>
<body>
<form action="index.htm" method="post" onsubmit="return check()">
<input type="text" name="test" id="test">
<input type="submit" value="提交">
</form>
</body>
</html>
2、jquery代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript" src="/sunchis/script/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":submit[id=tijiao]").click(function(check){
var val = $(":text[id=test]").val();
if(val==""){
alert("文本框输入为空，不能提交表单！");
$(":text[id=test]").focus();
check.preventDefault();//此处阻止提交表单
}
});
});
</script>
<title>jQuery禁止提交表单</title>
</head>
<body>
<form action="index.htm" method="post">
<input type="text" name="test" id="test">
<input type="submit" id="tijiao" value="提交">
</form>
</body>
</html>
3、超连接跳转
我们在超连接的时候，常常连接到一个jsp或者Action,比如:
XXX
这样做会有一个问题：在test.jsp中，除你传递的param1和param2参数外,你用request.getParamter()取任何原来页面的表单元素都会为空，这是因为这种方式会产生新的request生命周期，在这个request中只会包含超连接后跟随的?param1这种参数， 因此我的建议是如果不是很简单的页面跳转（比如回登陆页面之类的），尽量不要用这种超连接方式。
4、即传参又提交表单
如果确实既要像上述第一种方式传参数，又要提交表单的话，可以采取如下方式：
XXX在脚本中如下处理：
function commonSubmit(url)
{
form1.action="/jsp/managerAction.do?"+url;
form1.submit();
}
提交到Action和jsp是一样的原理，但要记住
中method=post不能少，否则它只提交表单而不传param参数了（正好和第一种相反:) )
5、js和java变量互传
在jsp中经常会遇到把js变量赋给java变量，或者将java变量赋给js变量的情况，在此将通用的处理方法小结如下：
java变量传给js好办，var a ="";注意要将引号""加上；js变量给java稍微复杂点，一般是在表单中用一个
的隐藏表单元素，然后在脚本中将js变量值赋给它:
var jsParamValue=aaaa;
form1.jsParam.value=jsParamValue;
然后就可以request.getPrameter("jsPrama");来取得js变量值了
6、Action中request不会丢掉
不知大家有没有注意到这个好处，Struts架构中是由一个ActionServlet来作为MVC的控制器角色，jsp页面提交后request是传到ActionServelt中的， 而ActionServlet将根据struts-config.xml中的配置调用相应的Action的方法，并将从jsp中获得的request传给Action类，这样request的生命周期是连续的，即你在jsp中提交了表单，在Action中执行了方法，再回到jsp页面，用request.getParamter()取jsp页面的表单元素值会发现它还在，这对于页面下拉列表等选择项防止复位是一个很好实现方法。
7、传参时参数有空格的情况
如果你提交form时带参数，比如form1.action="/jsp/Action.do?param1="+value1,注意如果value1中带有空格的话，你在Action中request.getParameter("param1");取得的只是空格前的值，因此如果有这种带空格的参数在传递时，个人建议是将其转化为特定的字符串，value1=value1.replaceAll(" ","%NULL%");然后在Action中将其转回来：request.getParamter("param1").replaceAll("%NULL%"," ");
8、form-data属性
如果你要用来上传文件的话，注意在一个表单中如果有enctype="multipart/form-data"属性的话，是不能接收除type=file外的其他表单元素类型的。 即如果你把和放在同一表单中，而该表单有enctype="multipart/form-data"的话，request.getParamter取text的值会为空， 这个问题的最简单的解决方法是将单独放一个表单，上传文件时只提交该表单即可。
9、jsp中开模式对话框的方式
与Swing中类似，jsp中也有模式对话框这一概念，你可以将一个jsp页面放到一个模式对话框中打开，这样在模式对话框消失前，原jsp页面将不可操作。特别适合父页面中要做一些额外的选择操作，而又没必要跳转到新的jsp页面的时候，
开模式对话框的方式参考如下：
Function open() {
If(window.showModelDialog())
{
Var returnValue = showModelDialog(“/jsp/模式窗口包含的jsp页面路径”;
help=0;status=0;center=yes;dialogWidth=100pt;dialogHeight=100pt”);
}
}
1、javascript 代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>JavaScript禁止提交表单</title>
<script type="text/javascript">
function getObj(id){
var Obj = document.getElementById(id).value;
return Obj;
}
function check(){
if(getObj("test")==""){
alert("文本框输入为空，不能提交表单！");
document.getElementById("test").focus;
return false;//false:阻止提交表单
}
}
</script>
</head>
<body>
<form action="index.htm" method="post" onsubmit="return check()">
<input type="text" name="test" id="test">
<input type="submit" value="提交">
</form>
</body>
</html>
2、jquery代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript" src="/sunchis/script/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":submit[id=tijiao]").click(function(check){
var val = $(":text[id=test]").val();
if(val==""){
alert("文本框输入为空，不能提交表单！");
$(":text[id=test]").focus();
check.preventDefault();//此处阻止提交表单
}
});
});
</script>
<title>jQuery禁止提交表单</title>
</head>
<body>
<form action="index.htm" method="post">
<input type="text" name="test" id="test">
<input type="submit" id="tijiao" value="提交">
</form>
</body>
</html>
3、超连接跳转
我们在超连接的时候，常常连接到一个jsp或者Action,比如:
XXX
这样做会有一个问题：在test.jsp中，除你传递的param1和param2参数外,你用request.getParamter()取任何原来页面的表单元素都会为空，这是因为这种方式会产生新的request生命周期，在这个request中只会包含超连接后跟随的?param1这种参数， 因此我的建议是如果不是很简单的页面跳转（比如回登陆页面之类的），尽量不要用这种超连接方式。
4、即传参又提交表单
如果确实既要像上述第一种方式传参数，又要提交表单的话，可以采取如下方式：
XXX在脚本中如下处理：
function commonSubmit(url)
{
form1.action="/jsp/managerAction.do?"+url;
form1.submit();
}
提交到Action和jsp是一样的原理，但要记住
中method=post不能少，否则它只提交表单而不传param参数了（正好和第一种相反:) )
5、js和java变量互传
在jsp中经常会遇到把js变量赋给java变量，或者将java变量赋给js变量的情况，在此将通用的处理方法小结如下：
java变量传给js好办，var a ="";注意要将引号""加上；js变量给java稍微复杂点，一般是在表单中用一个
的隐藏表单元素，然后在脚本中将js变量值赋给它:
var jsParamValue=aaaa;
form1.jsParam.value=jsParamValue;
然后就可以request.getPrameter("jsPrama");来取得js变量值了
6、Action中request不会丢掉
不知大家有没有注意到这个好处，Struts架构中是由一个ActionServlet来作为MVC的控制器角色，jsp页面提交后request是传到ActionServelt中的， 而ActionServlet将根据struts-config.xml中的配置调用相应的Action的方法，并将从jsp中获得的request传给Action类，这样request的生命周期是连续的，即你在jsp中提交了表单，在Action中执行了方法，再回到jsp页面，用request.getParamter()取jsp页面的表单元素值会发现它还在，这对于页面下拉列表等选择项防止复位是一个很好实现方法。
7、传参时参数有空格的情况
如果你提交form时带参数，比如form1.action="/jsp/Action.do?param1="+value1,注意如果value1中带有空格的话，你在Action中request.getParameter("param1");取得的只是空格前的值，因此如果有这种带空格的参数在传递时，个人建议是将其转化为特定的字符串，value1=value1.replaceAll(" ","%NULL%");然后在Action中将其转回来：request.getParamter("param1").replaceAll("%NULL%"," ");
8、form-data属性
如果你要用来上传文件的话，注意在一个表单中如果有enctype="multipart/form-data"属性的话，是不能接收除type=file外的其他表单元素类型的。 即如果你把和放在同一表单中，而该表单有enctype="multipart/form-data"的话，request.getParamter取text的值会为空， 这个问题的最简单的解决方法是将单独放一个表单，上传文件时只提交该表单即可。
9、jsp中开模式对话框的方式
与Swing中类似，jsp中也有模式对话框这一概念，你可以将一个jsp页面放到一个模式对话框中打开，这样在模式对话框消失前，原jsp页面将不可操作。特别适合父页面中要做一些额外的选择操作，而又没必要跳转到新的jsp页面的时候，
开模式对话框的方式参考如下：
Function open() {
If(window.showModelDialog())
{
Var returnValue = showModelDialog(“/jsp/模式窗口包含的jsp页面路径”;
help=0;status=0;center=yes;dialogWidth=100pt;dialogHeight=100pt”);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript 表单验证和button跳转
- JavaScript基础 button按钮结合submit方法 实现表单的提交与验证
- JavaScript基础 button按钮结合submit方法 实现表单的提交与验证
- 用 Javascript 验证表单（form）中的单选（radio）值
- Javascript的表单验证-提交表单
- JavaScript------表单约束验证DOM方法
- 前端工具 - 15个最佳的 JavaScript 表单验证库
- JavaScript-- 表单验证、 E-mail 验证
- 一句话JavaScript表单验证代码
- 超全超实用的Javascript类库和jQuery插件大全之一：Web表单和输入验证
- 用正则表达式和javascript对表单进行全面验证
- JavaScript 表单验证正则表达式大全
- [转]ASP动态生成的javascript表单验证代码。
- javascript表单正则验证
- JavaScript 表单验证
- JavaScript基础 submit按钮配合form的onsubmit实现表单的提交与验证
- JavaScript表单验证
- javascript 表单验证
- JavaScript之表单验证（1）
- javaScript表单验证