学习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>

巴特西

学习java前端两种form表单提交方式

第一种：原生方式

第二种：Jquery校验方式

最新文章

热门文章

巴特西

学习java前端 两种form表单提交方式

第一种：原生方式

第二种：Jquery校验方式

最新文章

热门文章

学习java前端两种form表单提交方式