表单开发的一些细节技巧（jsp+js）

在写和小雨一起的程序的时候，因为相对来说是比较系统的一个项目，我在里面主要做页面设计这一块，所以需要涉及到html的表单开发，还有js的一些判断，下面把具体遇到的内容说一下：

1.首先就是令人头疼的乱码问题，这里我一共是遇到了两个地方的乱码，一个是开发工具myeclipse本身的编码格式，这里就需要Window里面的属性，改变编码格式，具体步骤百度经验即可，这里就不再赘述了。

其实关键的还是传参的乱码的问题，即从servlet到jsp的地方，显示在jsp页面上是乱码，这里就要改参数的乱码形式，有多种方法，比如直接在jsp页面里敲入两行改变编码格式的代码，另一种方法就是写过滤器，过滤器可以改变该工程所有jsp页面的编码格式，所以用的是这个，下面把具体代码贴出来。

首先需要在src建立一个filter的包，再建立一个类：EncodingFilter，里面放有Java代码。

package filter;

import java.io.IOException;
import javax.servlet.Filter;  
import javax.servlet.FilterChain;  
import javax.servlet.FilterConfig;  
import javax.servlet.ServletException;  
import javax.servlet.ServletRequest;  
import javax.servlet.ServletResponse;  
  
public class EncodingFilter implements Filter {  
    //private String encoding = "utf-8";  
  
	//过滤器初始化的动作
    public void init(FilterConfig filterConfig) throws ServletException {  
        //this.encoding = filterConfig.getInitParameter(encoding);  
    }  
  
    //过滤器过滤时的动作
    public void doFilter(ServletRequest request, ServletResponse response,  
            FilterChain filterChain) throws IOException, ServletException {  
        request.setCharacterEncoding("utf-8");//表示设置request的编码为utf-8
        response.setCharacterEncoding("utf-8");  
        //response.setContentType("text/html;charset=" + encoding);  
        filterChain.doFilter(request, response); //表示请求向下传递 
    }  
  
  //过滤器消亡
    public void destroy() {  
        // destroy code.  
    }  
}  

完成EncodingFilter类的编写后，系统还无法识别，必须将其在web.xml中进行配置，配置很简单，即在web.xml这个文件最后加入如下代码

<filter>  
    	<filter-name>EncodingFilter</filter-name>  
    	<filter-class>filter.EncodingFilter</filter-class>  
  	</filter>  
  	<filter-mapping>  
    	<filter-name>EncodingFilter</filter-name>  
    	<url-pattern>/*</url-pattern>  
  	</filter-mapping> 

2.接下来就是表单，用js判断输入是否为空，这个在网站注册用户名和密码的时候经常会用到，我写的代码如下：

<form name="modifyForm" action="modifyproduct"  method="post">
   			<input type="hidden" name="type" value="${type}" />
   			
	<table  align="center">
  		<tr><td>产品ID（不可为空）</td>
  		<td><input type="text" name="id" id="proid" value="${product.id }" /></td>
  		</tr>
	    <tr>
	    <td>产品名称（不可为空）</td>
	    <td><input type="text" name="name" id="proname" value="${product.name }" /></td>
	    </tr>
  		<script language="javascript" type="text/javascript">
		function check()
		{
    		if((document.getElementById("proid").value=="")){
        	alert("id不能为空!");
        	return false;
    	}
    	if((document.getElementById("proname").value=="")){
        	alert("名字不能为空!");
        	return false;
    	}
    	return true;
		}
		</script>
  </table>
	
	<br>
	<a href="ModifyQualChrc.jsp">添加产品质量特性</a>   
	<br>
	<br>
		<input type="submit" οnclick="return check()" value="提交"/>
	</form>

还有一种通过name的方式进行验证：

<script>
function check()
{
    username=form1.username.value;
    password =form1.password.value;
	if (username=="" || paddword=="")
	{
         alert("用户名和密码不能为空");
         return false;
	}
	return true;
}
</script>
  <form method="post" name="form1" action="login.php"  >
 用户名：<input type="text" name="username" /><br/>
 密码：<input type="password" name="password" /><br/>
<input name="submit" value="登录" type="submit"  οnclick="return check()"/>
</form>