表单提交与按钮点击事件冲突

问题出现的原因：在提交表单的时候经常会需要判断表单内的内容是否合法，这时候就需要处理提交按钮点击事件与表单action属性的关系，

问题体现：无论表单内的内容是否合法，都会跳转到action绑定的地址。

解决办法：

一：用form表单的onsubmit方法添进行调用，不再使用按钮绑定事件。在表单进行提交时会先执行onsubmit()方法，然后根据返回值判断是否提交，只有在返回值为false的情况下不进行提交。代码如下：

<form action="xxxx.html"method="get" id="form1"onsubmit="return yy();">
    <fieldset>
        <legend class="clol">请输入预留信息</legend>
        <div>
            <label>预留姓名：<input  class="clol" id="name1" type="text" name="name" size="30" maxlength="100" /></label>
            <br />
            <label >预留手机号：<input class="clol" id="phone1" type="text" name="phone" size="30" maxlength="100"/></label>
            <br />
        </div>
     </fieldset>
    <button class="layui-btn-lg" type="submit" id = "submit">查询</button>
</form>

<script type="text/javascript">
var loginNmae1 = 0;
var loginphone1 = 0;
$("#name1").mouseleave(function(){
    var  loginName = $("#name1").val();
    if ( loginName =="") {alert('用户名不能为空！');}
    else {
        loginNmae1 =1;
    }
})
$("#phone1").mouseleave(function(){
    var loginphone = $("#phone1").val();
    if (loginphone ==""||loginphone.length!=11 || isNaN(Number(loginphone))){alert('手机号不正确，请重新输入');}
    else {loginphone1 = 1;}
})
function yy(){
    if(loginNmae1 == 1&&loginphone1 ==1) {
        document.getElementById('form1').submit();
        return true;
    }else{
        alert("手机号或姓名错误，请重新输入");
        window.location.href="yuyue.html";
        return false;
    }
}
</script>

二：利用先进行按钮绑定事件的判定，再验证成功的情况下再进行表单提交

<form action="xxxxxx.html" method="get" id="form1">
    <fieldset>
        <legend>请输入预留信息</legend>
        <div>
            <label>预留姓名：<input id="name1" type="text" name="name" size="30" maxlength="100" /></label>
            <br />
            <label>预留手机号：<input id="phone1" type="text" name="phone" size="30" maxlength="100"/></label>
            <br />
        </div>
    </fieldset>
    <button type="submit" id = "submit" onclick="tijiao">提交</button>
</form>
<srcipt type="text/javascript">
var loginNmae1 = 0;
var loginphone1 = 0;
$("#name1").mouseleave(function(){
    var  loginName = $("#name1").val();
    if ( loginName ==""){
       alert('用户名不能为空！');
    }else {
         loginNmae1 =1;
    }
})
$("#phone1").mouseleave(function(){
    var loginphone = $("#phone1").val();
    if (loginphone ==""||loginphone.length!=11 || isNaN(Number(loginphone))){alert('手机号不正确，请重新输入');}
    else {loginphone1 = 1;}
})
function tijiao(){
    if(loginNmae1 == 1&&loginphone1 ==1) {
       document.getElementById('form1').submit(); //验证成功进行表单提交
    }else{
        alert("手机号或姓名错误，请重新输入");
    }
}
</script>