脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript表单验证

详解JavaScript表单验证（E-mail 验证）

 更新时间：2016年03月31日 15:48:00   投稿：lijiao  
这篇文章主要为大家详细介绍了JavaScript表单验证，重点介绍了E-mail验证，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了JavaScript表单验证，被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 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 must be filled out!")==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 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

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,"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>

以上就是本文的全部内容，希望对大家学习javascript表单验证有所帮助。

您可能感兴趣的文章:

相关文章

  • JS操作select下拉框动态变动(创建/删除/获取)

    JS操作select下拉框动态变动(创建/删除/获取)

    动态创建及删除select、添加及删除选项option、获得选项option的值、获得选项option的文本等等，感兴趣的朋友可以参考下哈
    2013-06-06
  • es6 filter() 数组过滤方法总结

    es6 filter() 数组过滤方法总结

    这篇文章主要介绍了es6 filter() 数组过滤方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

    关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

    关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦，对于多浏览器的兼容性，需要注意。
    2009-08-08
  • 十个优秀的Ajax/Javascript实例网站收集

    十个优秀的Ajax/Javascript实例网站收集

    今天，要向大家推荐10个相当棒的Ajax和Javascript国外资源网站或博客，它们提供了相当多的高质量Ajax、Javascript实例及教程，喜欢Ajax和Javascript的朋友绝对不能错过。
    2010-03-03
  • JavaScript MutationObserver实例讲解

    JavaScript MutationObserver实例讲解

    MutationObserver用来监视DOM变动。DOM的任何变动，比如节点增减、属性的变动、文本内容的变动都会触发MutationObserver事件，它与事件有一个本质不同：事件是同步触发，MutationObserver则是异步触发，DOM的变动并不会马上触发，而是要等到当前所有DOM操作都结束才触发
    2022-12-12
  • JavaScript实现广告弹窗效果

    JavaScript实现广告弹窗效果

    这篇文章主要为大家详细介绍了JavaScript实现广告弹窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 如何实现一个webpack模块解析器

    如何实现一个webpack模块解析器

    这篇文章主要介绍了如何实现一个webpack模块解析器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • js基于面向对象实现网页TAB选项卡菜单效果代码

    js基于面向对象实现网页TAB选项卡菜单效果代码

    这篇文章主要介绍了js基于面向对象实现网页TAB选项卡菜单效果代码,实例演示了鼠标滑过即点击两种方式实现tab选项卡切换功能,涉及JavaScript鼠标事件控制页面元素属性变换的功能,需要的朋友可以参考下
    2015-09-09
  • 简单实现JS对dom操作封装

    简单实现JS对dom操作封装

    这篇文章主要介绍了简单实现JS对dom操作封装，需要的朋友可以参考下
    2015-12-12
  • javascript demo 基本技巧

    javascript demo 基本技巧

    js下的一些小技巧，需要的朋友可以下。
    2009-12-12

最新评论