天天看点

JS-Jquery 控制表单提交

html页面

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="../regular_expression/jquery-3.0.0.min.js"></script>
</head>
<body>
    <form id ='form' method="post" action="javascript:void(0)" >
        请输入姓名<input type="text" name="name" value="">
        <br>
        <input type="submit" name="submit"  onclick="check()" value ='confirm'>

    </form>

    <script type="text/javascript">
    function check(){
        var text=$('input').eq(0).val();
        if (text) {
            //Jquery
            // $('#form').attr('action','./test.php');
            // $('#form').submit();
            
            //JS
            // var form=document.getElementById('form');
            // form.action="./test.php"
            // form.submit();
        }else{
            alert('请输入姓名');
        }
    }
    </script>
</body>
</html>
           

form 表单的action 设置为不跳转,在check()方法里进行验证,如果验证通过,就更改表单的action值 并且提交表单,例子很简单,有用的就两行红色部分。

实际运用的时候肯定要大量验证,最后都通过了在进行表单的提交。