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">&nbsp;</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();
    }