Question

JS 点击button后判断input是否输入用户名和密码，否则提示请输入用户名和密码

在span标签提示 请输入用户名和密码

Answer 1

用jquery吧。具体参考下下面的代码。

HTML的form

<form class="form form-horizontal" action="index.html" method="post">
    <div class="row cl">
        <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
        <div class="formControls col-xs-8">
            <input id="username"  type="text" placeholder="账户" class="input-text size-L">
        </div>
    </div>
    <div class="row cl">
        <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
        <div class="formControls col-xs-8">
            <input id="password"  type="password" placeholder="密码" class="input-text size-L">
        </div>
    </div>
    <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
            <label for="online">
                <input type="checkbox" name="online" id="online" value="">
                使我保持登录状态</label>
        </div>
    </div>
    <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
            <input id="loginBtn" type="button" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
            <input name="" type="reset" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
            <p id="loginTip" style="color: red;"></p>
        </div>
    </div>
</form>

JAVASCRIPT

<script>
    $(document).ready(function(){
        //判断当前是否有用户登陆
        $.post("./mockJson/judgeLogin.json",function(data){
            if(data.returnCode==0){
                //跳转首页
                location.href="A_index.html";
            }else{
                //绑定loginBtn事件
                $("#loginBtn").click(userLogin);
            }
        });
    });
    function userLogin(){
        var username = $("#username").val();
        var password = $("#password").val();
        var tipMsg = $("#loginTip");
        if(username!="" && username!=null && password!="" && password!=null){
            $.post("./mockJson/toLogin.json",{
                userName:username,
                passWord:password
            },function(data){
                if(data.returnCode==0){
                    location.href="A_index.html";
                }else{
                    tipMsg.text(data.returnMsg);
                }
            });
        }else{
            tipMsg.text("请填写完整再提交登陆");
        }
    }
</script>

追问

judgeLogin.json 和 toLogin.json呢？

有点复杂能不能写JavaScript的

追答

这两个是涉及到与服务器交互的，可以不用管。

主要就是 你在登陆框下加个这个：

 <p id="loginTip" style="color: red;"></p>

然后javascript这样写：

${document}.ready(function(){
    //loginBtn是提交BUTTON的按钮ID
    $("#loginBtn").click(userLogin);
);
 function userLogin(){
    //var username = $("#username").val();
    //var password = $("#password").val();
    var tipMsg = $("#loginTip"); 
    if(username!="" && username!=null && password!="" && password!=null{
        //发送登陆请求
    }else{
        tipMsg.text("请填写完整再提交登陆");
    }

使用需要导入jquery包。