ajax判断某个input输入文本框是否为空

贺轶
2023-12-01

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();
    }
 类似资料: