1. 程式人生 > >php 表單提交 表單前端驗證

php 表單提交 表單前端驗證

//HTML 程式碼

        <form id="form">
            <input type="hidden" name="status" value="<?php echo $_GET['status'] ?>" />
            <input type="hidden" name="url" />
            <input type="hidden" name="vehicle_type" value="0" />
            <input type="hidden" name="figure" value="0" />
            <div class="bar"><label>司機名</label>
                <div><input type="text" name="driver">
                    <div class="layer"></div>
                </div>
            </div>

            <div class="bar">
                <?php if ((!empty($_GET['status']) && $_GET['status'] == 1) || (!empty($_GET['status']) && $_GET['status'] == 2)) { ?>
                    <label class="pcode_name" id='name'>手機號</label>
                    <div><input type="text" name="phone" id="pcode" class='br'>
                        <div class="layer"></div>
                    </div>
                <?php } else { ?>
                    <label class="code_name">邀請碼</label>
                    <div><input type="text" name="phone" id="code" class='br'>
                        <div class="layer"></div>
                    </div>
                <?php } ?>
            </div>
        </form>
    </div>
    <div class="submit">
        <a href="javascript:void(0)" id="submit">確認</a>
    </div>
//js程式碼
   <script type='text/javascript'>
$('#submit').click(function() {
           
if ($('#name').val() == '')
           {
               alert('請填寫司機名稱');
               return false;
           }
<?php if ((!empty($_GET['status']) && $_GET['status'] == 1) || (!empty($_GET['status']) && $_GET['status'] == 2)) { ?> if ($('#pcode').val() == '') { alert('請填' + ($(
'#pcode'
').text())); return false; } var phone = document.getElementById('pcode').value; if (!(/^1\d{10}$/.test(phone))) { alert("手機號碼有誤,請重填"); return false; } <?php } else { ?> if ($('#code').val() == '') { alert('請填' + ($('.code_name').text())); return false; } <?php } ?> $.post("/usercar/upload/", $("#form").serialize(), function(data) { if (data.status == 200) { alert(data.msg); document.location = '/site/icar/'; } else { alert(data.msg); } }, "json"); });
    </script>
方法2.
<script type='text/javascript'>
   	
	$('#submit').click(function() {
           
    if ($('[name=driver]').val() == '') {
                alert('請填寫司機名稱');
                return false;
            }
if ($('[name=phone]').val() == '') { alert('請填' + (($('.br').text()));
                return false;
            }

            var phone = document.getElementById('pcode').value;
            if (!(/^1\d{10}$/.test(phone))) {
                alert("手機號碼有誤,請重填");
                return false;
            }
        $.post("/usercar/upload/", $("#form").serialize(), function(data) {
            if (data.status == 200) {
                alert(data.msg);
                document.location = '/site/icar/';
            } else {
                alert(data.msg);
            }
        }, "json");
    });

    </script>	

注:此處程式碼不是怎麼好,但意思是表達了的,兩種方法其實是兩種獲取input框的方式,對於獲取input框的方法,我上面的部落格中也有,本人水平有限,
 但對於初學者還是有些幫助的。