表单开发的一些细节技巧（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" onclick="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"  onclick="return check()"/></form>