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>
Comment (RSS)  ·  Trackback

6 Comments

  1. Anonymous:

    为什么老是提示email未定义,按钮必须为Submit才可以,button不行吗?

    21 August 2008, 2:04 am

  2. Anonymous:

    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}
    }
    }

    Email:

    2 December 2008, 7:05 am

  3. 匿名:

    看了这么多程序,感觉你的页面还接受得了…
    但接受不了的就是你们文章没新意,没有多少原创…
    好多我都在其它(W3)上看到的文章你们拿来show,不太好吧…

    3 August 2009, 2:54 am

  4. Aqua:

    如果你说的是JavaScript教程，教程首页已经写的很清楚了，本站JavaScript教程是本站根据W3schools.com上的英文教程自行翻译的，加入了一些修正和作者自己的理解。
    本站大部分文章都是站长看到好的英文原版文章后觉得值得推荐，然后自行翻译的，而且所有翻译的文章都有注明原文出处。个别文章为转贴，也都注明了转贴来源。未标明出处或参考来源的均为本站原创。如果你在其他地方看到，那是抄袭我们的。最近已经发现许多站点抄袭我们的文章而不给出原文链接。
    不过本站是个人站点，也没那么多时间去追究，反正文章也是为了自己存档方便，同时与编程爱好者共享。谢谢你来访，我想有素质的程序员也自然会自觉。

    3 August 2009, 12:44 pm

  5. bluefox:

    站长的做法既利己又利人，就算文章是翻译过来的也是为大家做出了贡献，1L的什么都没做，却在这边大放厥词，未免让人觉得心态阴暗。

    9 September 2009, 5:30 am

  6. rubbish:

    顶楼上

    谁敢保证自己说的都是正确呢？

    人家站长也没说就是都正确

    不喜欢就别来啊

    人家费劲心机完成的你不劳而获也就算了 还说风凉话

    人品太次

    13 August 2010, 9:56 pm

Leave a comment