1，編寫頁面
2，查詢資料庫名字，
3，配置檔案
4，頁面判斷
效果展示：
在不輸入資訊或者錯誤資訊時光标移開直接提示
重置将所有提示清楚
1，編寫頁面
<body>
<form action="add" onSubmit="return login(this);">
<h2 align="center">請注冊</h2>
<table align="center">
<tr>
<td>使用者名：</td>
<td><input type="text" name="name" id="mess" onblur="checkName()"></td>
<td> <span id="message"></span></td>
</tr>
<tr>
<td>密 碼：</td>
<td><input type="password" name="pwd" id="ipwd" onblur="sspwd()"></td>
<td> <span id="spwd"></span></td>
</tr>
<tr>
<td>确認密碼：</td>
<td><input type="password" name="pwd2" id="pwd2" onblur="checkPwd()"></td>
<td> <span id="spwd2"></span></td>
</tr>
<tr>
<td><input type="reset" value="重置" onclick="clean()"></td>
<td> <input type="submit" value="注冊" ></td>
</tr>
</table>
</form>
</body>
2，查詢資料庫名字，
判斷資料庫是否有這個使用者有則不能使用
package org.xian.action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.xian.dao.TreeDao;
import org.xian.dao.UserDao;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class ApiAction extends ActionSupport {
private String name;
private UserDao dao;
private Map map;
public void setDao(UserDao dao) {
this.dao = dao;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Map getMap() {
return map;
}
public void setMap(Map map) {
this.map = map;
}
public String checkName() {
map=new HashMap();
map.put("status", "ok");
List list=dao.checkName(name);
if (list.size()!=) {
map.put("message","使用者已存在，請重新輸入~~~" );
map.put("code", "1");
}else {
map.put("message","使用者名可以使用~~~" );
map.put("code", "0");
}
return SUCCESS;
}
}
3，配置檔案
applicationContext.xml
<!-- -action- -->
<bean class="org.xian.action.ApiAction" id="apiAction">
<property name="dao" ref="userDao"></property>
</property>
</bean>
<!-- dao -->
<bean class="org.xian.dao.UserDao" id="userDao">
<property name="hibernateTemplate" ref="hibernateTemplate"></property>
</bean>
struts.xml
<package name="json" namespace="/api" extends="json-default">
<action name="checkName" class="apiAction" method="checkName">
<result name="success" type="json">
<param name="root">map</param>
</result>
</action>
</package>
4，頁面判斷
判斷名字是否可用
function checkName() {
var name = $("#mess").val();
if (name == "") {
$("#message").removeClass();
$("#message").addClass("message");
$("#message").html("使用者不能為空！");
return false;
}
$.ajax({
type : "POST",
url : "api/checkName",
data : "name=" + name,
success : function(msg) {
if (msg.code == ) {
$("#message").removeClass();
$("#message").addClass("message");
$("#message").html(msg.message);
} else {
$("#message").removeClass();
$("#message").addClass("message2");
$("#message").html(msg.message);
}
}
});
}
判斷密碼不能為空，兩次密碼需要一樣
function checkPwd() {
var pwd2 = $("#pwd2").val();
var pwd = $("#ipwd").val();
if (pwd2 == "") {
$("#spwd2").removeClass();
$("#spwd2").addClass("message");
$("#spwd2").html("密碼不能為空！");
return false;
}
if (pwd == pwd2) {
$("#spwd2").removeClass();
$("#spwd2").addClass("message2");
$("#spwd2").html("可以使用~~~");
} else {
$("#spwd2").removeClass();
$("#spwd2").addClass("message");
$("#spwd2").html("兩次輸入密碼不一樣~~~");
}
}
function sspwd() {
var pwd = $("#ipwd").val();
if (pwd == "") {
$("#spwd").removeClass();
$("#spwd").addClass("message");
$("#spwd").html("密碼不能為空！");
return false;
} else {
$("#spwd").removeClass();
$("#spwd").addClass("message2");
$("#spwd").html("可以");
}
}
送出時提醒
function login(){
if(form.name.value == ""||form.name.value==null){
alert("使用者不能為空！");
return false;
}
if(form.pwd.value == ""||form.pwd.value==null){
alert("密碼不能為空！");
return false;
}
if(form.pwd2.value == ""||form.pwd2.value==null){
alert("請再次輸入密碼！");
return false;
}
}
重置時清楚所有提示資訊
function clean() {
$("#message").removeClass();
$("#spwd").removeClass();
$("#spwd").html("");
$("#spwd2").removeClass();
$("#spwd2").html("");
$("#message").html("");
}