JS表单前台校验模板

表单校验是几乎所有WEB应用都会用到的，这里提供一种用原生JavaScript的简单前台校验

<form id="registerForm" action=""  method="post"onsubmit="return checkForm();">
　　用户名:　　<input type="text" id="username" name="username" maxlength="20" onblur="checkUsername()"/><span id="span1"></span>
　　密码:　　　<input type="password" id="password" name="password" maxlength="20"/>
　　确认密码:　<input id="repassword" type="password" name="repassword" maxlength="20"/>
　　　　　　　 <input type="submit" value="注册">
</form>

function checkForm(){
　　// 校验用户名:
　　// 获得用户名文本框的值:
　　var username = document.getElementById("username").value;
　　if(username == null || username == ''){
　　　　alert("用户名不能为空!");
　　　　return false;
　　}
　　// 校验密码:
　　// 获得密码框的值:
　　var password = document.getElementById("password").value;
　　if(password == null || password == ''){
　　　　alert("密码不能为空!");
　　　　return false;
　　}
　　// 校验确认密码:
　　var repassword = document.getElementById("repassword").value;
　　if(repassword != password){
　　　　alert("两次密码输入不一致!");
　　　　return false;
　　}
} 
function checkUsername(){
　　// 获得文件框值:
　　var username = document.getElementById("username").value;
　　// 1.创建异步交互对象
　　var xhr = createXmlHttp();
　　// 2.设置监听
　　xhr.onreadystatechange = function(){
　　　　if(xhr.readyState == 4){
　　　　　　if(xhr.status == 200){
　　　　　　　　document.getElementById("span1").innerHTML = xhr.responseText;
　　　　　　}
　　　　}
　　}
　　// 3.打开连接
　　xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
　　// 4.发送
　　xhr.send(null);
} 
function createXmlHttp(){
　　var xmlHttp;
　　try{ // Firefox, Opera 8.0+, Safari
　　　　xmlHttp=new XMLHttpRequest();
　　}catch (e){
　　　　try{// Internet Explorer
　　　　　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
　　　　}catch (e){
　　　　　　try{
　　　　　　　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　　　　　}catch (e){}
       }
   }
　　return xmlHttp;
}

public String findByName() throws IOException {
　　// 调用Service进行查询:
　　User existUser = userService.findByUsername(user.getUsername());
　　// 获得response对象,项页面输出:
　　HttpServletResponse response = ServletActionContext.getResponse();
　　response.setContentType("text/html;charset=UTF-8");
　　// 判断
　　if (existUser != null) {
　　　　// 查询到该用户:用户名已经存在
　　　　response.getWriter().println("<font color='red'>用户名已经存在</font>");
　　} else {
　　　　// 没查询到该用户:用户名可以使用
　　　　response.getWriter().println("<font color='green'>用户名可以使用</font>");
　　}
　　return NONE;
}