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