jsp
<script type="text/javascript">
function checkAccount() {
//点击输入账号时,触发ajax事件
$.ajax({
url:"checkAccount.do",
type:"post",
data:{
account:$("input[name=account]").val(),
},
dateType:"json",
success:function (result) {
//var flag = result.accountFlag;
var result = eval("("+result+")");
var account = document.getElementById("account").value;
//var account = addForm.account.value;也可以
var accountFlag = result.accountFlag;
if (account == "") {
document.getElementById("accountTip").innerHTML="请输入账号";
}else if (accountFlag == 1){
document.getElementById("accountTip").innerHTML="该账号已被注册";
}else if (accountFlag == 2) {
document.getElementById("accountTip").innerHTML="";
}
}
});
}
function checkPassword() {
//点击输入密码时,触发ajax事件,注意这里不需要提交给后台,在js中直接判断该文本框是否为空即可
var password1 = document.getElementById("password1").value;
if (password1 == "") {
document.getElementById("passwordTip").innerHTML="请输入密码";
}else{
document.getElementById("passwordTip").innerHTML="";
}
}
</script>
<div id="right_ctn">
<div class="right_m">
<div class="hy_list">
<div class="box_t">
<span class="name">添加员工</span>
</div>
<div class="space_hx"> </div>
<form action="add.do" method="post" name="addForm">
<div class="xjhy">
<!--高级配置-->
<ul class="hypz gjpz clearfix">
<li class="clearfix">
<span class="title">姓名:</span>
<div class="li_r">
<input class="chang" name="name" type="text">
</div>
</li>
<li class="clearfix">
<span class="title">部门:</span>
<div class="li_r">
<select name="did" >
<c:forEach items="${DLIST}" var="dep">
<option value="${dep.id}">${dep.name}</option>
</c:forEach>
</select>
</div>
<span class="tip"></span>
</li>
<li class="clearfix">
<span class="title">账号:</span>
<div class="li_r">
<input class="chang" id="account" name="account" type="text" onchange="checkAccount()" required="required" >
<%--<input class="chang" name="account" type="text" >--%>
</div>
<span id="accountTip" style="color:red;font-size: 12px;"></span>
</li>
<li class="clearfix">
<span class="title">密码:</span>
<div class="li_r">
<input class="chang" id="password1" name="password" type="password" onchange="checkPassword()" required="required">
<%--<input class="chang" name="password" type="password" >--%>
</div>
<span id="passwordTip" style="color:red;font-size: 12px;"></span>
</li>
<li class="clearfix">
<span class="title">再次输入密码:</span>
<div class="li_r">
<input class="chang" name="password2" type="password" required="required">
</div>
<span id="passwordTip2" style="color:red;font-size: 12px;"></span>
</li>
<li class="clearfix">
<span class="title">性别:</span>
<div class="li_r">
<span class="radio">
<input checked="checked" name="sex" type="radio" value="男" >
<em>男</em>
</span>
<span class="radio">
<input name="sex" type="radio" value="女">
<em>女</em>
</span>
</div>
</li>
<li class="clearfix">
<span class="title">备注:</span>
<div class="li_r">
<input class="chang" name="info" type="text">
</div>
</li>
<li class="tj_btn">
<a href="javascript:history.go(-1);" class="back"> 返回</a>
<a href="javascript:addForm.submit();">保存</a>
<%--<a onclick="get()">保存</a>--%>
</li>
</ul>
<!--高级配置-->
</div>
</form>
</div>
</div>
</div>
后台代码
public void checkAccount(HttpServletRequest request,HttpServletResponse response) throws IOException {
String account = request.getParameter("account");
Staff staff = staffService.getByAccount(account);
JSONObject accountJson = null;
if (null != staff){
//数据库已存在该账号,则返回信息给ajax
accountJson = new JSONObject("{accountFlag:1}");
}else if (null == staff){
//数据库未存在该账号
accountJson = new JSONObject("{accountFlag:2}");
}
response.getOutputStream().write(accountJson.toString().getBytes("utf-8"));
response.getOutputStream().flush();
response.getOutputStream().close();
}