jquery 验证表单

最新推荐文章于 2024-09-08 21:45:17 发布

原创最新推荐文章于 2024-09-08 21:45:17 发布 · 74 阅读

CC 4.0 BY-SA版权

1、为了减轻后台压力，可以利用JavaScript在表单提交前对表单数据进行验证。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Example1</title>  
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>  
  
<script type="text/javascript">  
function jump()  
{  
    //清空表单所有数据  
   // document.getElementById("firstname").value=""  
   // document.getElementById("lastname").value=""  
    $("input[name=firstname]").val("") 
    $("input[name=lastname]").val("") 
    $("#firstnameLabel").text("")  
    $("#lastnameLabel").text("")  
}  
  
$(document).ready(function(){  
    $("#form1").bind("submit", function(){  
        
        var txt_firstname = $.trim($("input[name=firstname]").val()) 
         
        var txt_lastname = $.trim($("input[name=lastname]").val())  
  
        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 == 0)  
        {  
            return false;  
        }  
        })  
    })  
</script>  
</head>  
<body>  
提交表单前进行验证(方法一)  
<hr width="40%" align="left" />  
<form id="form1" method="post" action="/DealWithForm1/">   
<table>  
<tr>  
<td>first_name:</td>  
<td><input name="firstname" type="text"  /></td>  
<td><label id="firstnameLabel"></label></td>  
</tr>  
<tr>  
<td>last_name:</td>  
<td><input name="lastname" type="text"  /></td>  
<td><label id="lastnameLabel"></label></td>  
</tr>  
</table>  
<hr width="40%" align="left" />  
<button type="submit">提交</button>  
<button type="button" onclick="jump();">取消</button>  
</form>  
</body>  
</html>