JavaScript 表单验证(Form Validation)
JavaScript 可以被用来在向服务器发送内容前验证HTML表单中输入的信息是否符合要求。
JavaScript 表单验证
在向服务器发送信息前，可以使用JavaScript来验证一个HTML 表单(form)中输入的信息是否合法。通常使用JavaScript验证的表单数据可以是：
- 必填数据是否为空?
- 用户输入的e-mail地址是否合法?
- 用户输入的日期是否有效?
- 一个数值域是否输入了非数值文本?
检查必填数据
下面的函数检查一个必填数据域是否为空。如果为空，则显示一个警示窗口和警示信息，并返回false值。否则直接返回true (意味着数据正确):
| function validate_required(field,alerttxt) { with (field) { if (value==null||value==”") {alert(alerttxt);return false} else {return true} } } |
完整的脚本连同HTML表单可以像下面例中所示：
| <html> <head> <script type=”text/javascript”> function validate_required(field,alerttxt) { with (field) { if (value==null||value==”") {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,”Email 地址必须填写!”)==false) {email.focus();return false} } } </script> </head> <body> <form action=”submitpage.htm” onsubmit=”return validate_form(this)” method=”post”> Email: <input type=”text” name=”email” size=”30″> <input type=”submit” value=”Submit”> </form> </body> </html> |
E-mail 验证
下面的函数可以检查输入的email地址的一般格式，也就是说输入的数据必须包含最少一个@符号和一个点 (.)，而且 @ 符号必须不是email地址的第一个字符，而且最后一个点(.)必须在@后面至少一个字符以后:
| function validate_email(field,alerttxt) { with (field) { apos=value.indexOf(”@”) dotpos=value.lastIndexOf(”.”) if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } |
完整的脚本连同HTML表单可以像下面例中所示：
<html><head>
<script type=”text/javascript”>
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf(”@”)
dotpos=value.lastIndexOf(”.”)
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,”请输入有效的email地址!”)==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action=”submitpage.htm”
onsubmit=”return validate_form(this);”
method=”post”>
Email: <input type=”text” name=”email” size=”30″>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
转 http://www.cnblogs.com/chairongzhen/archive/2009/05/05/1065503.html
//*******************************************************************
我测试实例
//*********************
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="js1.aspx.cs" Inherits="HYManage_StoreStore_temp_js_js1" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email 地址必须填写!")==false)
{ email.focus(); return false }
if (validate_required(txtMoney, "Money必须填写!") == false)
{ email.focus(); return false }
}
}
</script>
</head>
<body>
<form id="form1" runat="server" onsubmit="return validate_form(this)" method="post">
Email:
<input type="text" name="email"/>
<asp:TextBox ID="txtMoney" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
