form表单提交前验证

一、

html

<form id="form1" method="post" action="/DealWithForm1/">   
<table>  
<tr>  
<td>first_name:</td>  
<td><input name="firstname" type="text" id="firstname" /></td>  
<td><label id="firstnameLabel"></label></td>  
</tr>  
<tr>  
<td>last_name:</td>  
<td><input name="lastname" type="text" id="lastname" /></td>  
<td><label id="lastnameLabel"></label></td>  
</tr>  
</table>  
<hr width="40%" align="left" />  
<button type="button" onclick="checktosubmit()">提交</button>  
<button type="button" onclick="jump();">取消</button>  
</form>

js

<script type="text/javascript">  
function jump()  
{  
    //清空表单所有数据  
    document.getElementById("firstname").value=""  
    document.getElementById("lastname").value=""  
    $("#firstnameLabel").text("")  
    $("#lastnameLabel").text("")  
}  

function checktosubmit(){  
    var txt_firstname = $.trim($("#firstname").attr("value"))  
    var txt_lastname = $.trim($("#lastname").attr("value"))  

    $("#firstnameLabel").text("")  
    $("#lastnameLabel").text("")  

    var isSuccess = 1;  
    if(txt_firstname.length == 0)  
    {  
        $("#firstnameLabel").text("firstname不能为空！")  
        $("#firstnameLabel").css({"color":"red"});  
        isSuccess = 0;  
    }  
    if(txt_lastname.length == 0)  
    {  
        $("#lastnameLabel").text("lastname不能为空！")  
        $("#lastnameLabel").css({"color":"red"});  
        isSuccess = 0;  
    }  
    if(isSuccess == 1)  
    {  
        form1.submit();  
    }  
}  
</script>

二、

html

<form id="form1" method="post" action="/DealWithForm1/" onsubmit="return check()">   

<input name="firstname" type="text" id="firstname" />
<button type="submit">提交</button>  

</form>

js

<script type="text/javascript">  
function check(){  

    var txt_firstname = $.trim($("#firstname").attr("value"))  
    $("#firstnameLabel").text("")  

    var isSuccess = 1;  
    if(txt_firstname.length == 0)  
    {  
        $("#firstnameLabel").text("firstname不能为空！")  
        $("#firstnameLabel").css({"color":"red"});  
        isSuccess = 0;  
    }  

    if(isSuccess == 0)  
    {  
        return false;  
    }  
    return true;  
    }  
</script>

三、

html

<form id="form1" method="post" action="/DealWithForm1/">   

<input name="firstname" type="text" id="firstname" />
<button type="submit">提交</button> 

</form>  

js

<script type="text/javascript">  

$(document).ready(function(){  

    $("#form1").bind("submit", function(){  
        var txt_firstname = $.trim($("#firstname").attr("value"))     
        $("#firstnameLabel").text("")  

        var isSuccess = 1;  
        if(txt_firstname.length == 0)  
        {  
            $("#firstnameLabel").text("firstname不能为空！")  
            $("#firstnameLabel").css({"color":"red"});  
            isSuccess = 0;  
        }  

        if(isSuccess == 0)  
        {  
            return false;  
        }  
        })  
    })  
</script>