學習java前端 兩種form表單提交方式

第一種：原生方式

注意點：button標簽的style為submit

<form action="/trans/doTrans.do" method="post">

    轉出卡號：${cardNo}
    <br>
    轉出卡號余額：${balance}元
    <br> <br>
    轉入卡號：<input name="checkInCardNo" type="text">
    <br>
    轉入卡號姓名：<input name="realName" type="text">
    <br>
    轉出金額：<input name="money" type="text">

    <br>

    <button type="submit">確定轉出</button>


</form>

第二種：Jquery校驗方式

注意點：button標簽的style為button
流程：點擊提交，首先觸發submitForm()方法，執行校驗及id選擇器，最后提交form表單。

 <script type="text/javascript">
    function submitForm() {
        if($("#t_in_cardNo").val().length!=8){
            alert("您輸入的卡號位數不對！")
            return;
        }
        $("#transForm").submit();<!--此處是submit方法-->
    }
  </script>
  
  
         

<form id="transForm" class="am-form am-form-horizontal" action="/trans/doTrans.do" method="post">
    <div class="am-form-group">
        <label class="am-u-sm-3 am-form-label">轉出卡號</label>
        <div class="am-u-sm-9">
            <input type="text" id="t_cardNo" readonly placeholder=${cardNo}>

        </div>
    </div>

    <div class="am-form-group">
        <label class="am-u-sm-3 am-form-label">轉入卡號</label>
        <div class="am-u-sm-9">
            <input type="text" id="t_in_cardNo" pattern="[0-9]*" placeholder="請輸入8位對方卡號"
                   name="checkInCardNo">
        </div>
    </div>

    <div class="am-form-group">
        <label class="am-u-sm-3 am-form-label">轉賬金額</label>
        <div class="am-u-sm-9">
            <input type="text" id="t_money" placeholder="輸入轉賬金額" name="money">
        </div>
    </div>


    <div class="am-form-group">
        <div class="am-u-sm-9 am-u-sm-push-3">
            <button type="button" onclick="submitForm()" class="am-btn am-btn-primary">提交</button><!--此處為提交類型為button-->
        </div>
    </div>
</form>