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;
}

这个是我的实验效果：

效果：



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