javascript表单验证使用示例(javascript验证邮箱)

 更新时间:2014年01月07日 15:54:48   作者:   我要评论
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证

被 JavaScript 验证的这些典型的表单数据有:

用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

复制代码 代码如下:

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

E-mail验证(验证邮箱)

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

复制代码 代码如下:

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>
<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,"Not a valid e-mail address!")==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>

相关文章

  • 14 个折磨人的 JavaScript 面试题

    14 个折磨人的 JavaScript 面试题

    这篇文章主要为大家详细介绍了14 个折磨人的 JavaScript 面试题,希望对大家有所帮助,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript 获取url参数和script标签中获取url参数函数代码

    javascript 获取url参数和script标签中获取url参数函数代码

    不要在方法中调用方法,否则可能始终获取的是最后一个js的文件的参数,要在方法中使用,请先用变量保存,在方法中直接获取
    2010-01-01
  • web打印小结

    web打印小结

    本文主要介绍了一款比较强大的web打印工具lodop实现将winform客户端的打印,移到网页上由客户自行打印,打印要求是根据一定的格式实现套打的过程与方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • List the UTC Time on a Computer

    List the UTC Time on a Computer

    List the UTC Time on a Computer...
    2007-06-06
  • 初探JavaScript 面向对象(推荐)

    初探JavaScript 面向对象(推荐)

    js 面向对象知识是最基础的入门知识点,下面通过本文实例代码给大家详细介绍js 面向对象的知识,感兴趣的朋友一起学习吧
    2017-09-09
  • String字符串截取的四种方式总结

    String字符串截取的四种方式总结

    下面小编就为大家带来一篇String字符串截取的四种方式总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • cordova入门基础教程及使用中遇到的一些问题总结

    cordova入门基础教程及使用中遇到的一些问题总结

    这篇文章主要给大家介绍了关于cordova的入门基础教程以及在使用中遇到的一些问题,文中通过示例代码一步步介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 深入理解javascript严格模式(Strict Mode)

    深入理解javascript严格模式(Strict Mode)

    Strict mode是JavaScript1.8.5引进的技术,但还没有浏览器确实可靠的实现了严格模式,所以使用时要小心并且多测试。Strict mode可以应用于整个脚本,也可以适合于单个函数。
    2014-11-11
  • 如何基于JS截获动态代码

    如何基于JS截获动态代码

    这篇文章主要介绍了JS注入eval, Function系统函数并截获动态代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • setInterval和setTimeout停止的方法

    setInterval和setTimeout停止的方法

    要想知道它们是怎么停止的,首先我们要了解它们的运行机制和原理,下面是具体的介绍。
    2011-01-01

最新评论