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>