DOM模型验证用户输入小案例

在编写一些小的项目中，比如验证用户的表单输入，提醒用户表单输入不能为空，因为如果表单输入可以为空的话，那么一些不法的用户就可以任意的输入，或者说使用的人就会觉得这个应用存在bug。
好了废话不多说，接下来就简单的展示一下，如何在jsp页面，嵌入javascript，以实现更友好的界面

页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/manage/Header.jsp" %>


 <form action="${pageContext.request.contextPath}/manage/ManageServlet?op=addCategory" method="POST">

 <table border="1" align="center">

  <tr>
  <td>*分类名称</td>
  <td><input type="text" name="name" id="name"></td>
  </tr> 
  <tr>
  <td>*分类描述</td>
  <td><textArea cols="38" rows="3" name="description"></textArea></td>
  </tr> 

  <tr align="center"><td colspan="2"><input type="button" value="保存" onclick="toSubmit()"> </td></tr> 


 </table>

 </form>

 <script type="text/javascript">

 function toSubmit()
 {
     var nameValue = document.getElementById("name").value; 

    //要使用这些函数，还必须在ajax的utils.js函数中引入原型，这杨才可以
      if(nameValue.trim()=="")
       {
          alert("分类名称不能为空，请输入分类名称");
          //return在这里的作用就表示让用户别提交，就是不能提交完成，必须要输入用户名才可以
          return ;
       }

       //如果他输入的用户名字不是空的话，那么我们就点击让他提交
       document.forms[0].suumit();

    }
 </script>

  </body>
</html>

当然在使用上面的代码的时候我们还需要使用ajax提供的原型，这段代码需要放在一个js文件夹下面，然后引入到要使用的内中
引入时候的申明

<script type="text/javascript" src="${pageContext.request.contextPath }/js/util.js"></script>

util.js源代码：

function getXHR() {
    var xmlHttp;

    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {

        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {

            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您的浏览器不支持AJAX！");
                return false;
            }
        }
    }
     //相当于在原来的String源码上添加了一个trim()方法
  String.prototype.trim = function()
    {
        return this.replace(/(^\s*)|(\s*$)/g, "");
    }

    return xmlHttp;
}

这个是我的实验效果：

效果：

，如果有什么不明白的地方，可留言，我会尽快的回复