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>