JavaScript表单验证实现代码
更新时间：2017年05月22日 08:41:21 作者：飞影惊鸿
这篇文章主要为大家详细介绍了JavaScript表单验证的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证
JavaScript 表单验证
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}
}
}
下面是连同 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇js实现页面跳转的五种方法推荐。小编觉得挺不错的。现在分享给大家。给大家参考一下。2016-03-03
这篇文章主要介绍了JS删除String里某个字符的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
动态添加option在某些特殊的情况下还是比较实用的，本文有个小示例为大家介绍下createElement使用，感兴趣的朋友可以参考下2014-01-01
这篇文章主要为大家详细介绍了js实现炫酷的烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了JS面向对象编程对象和构造函数,结合实例形式详细分析了JS面向对象编程对象和构造函数具体概念、原理、使用方法及操作注意事项,需要的朋友可以参考下2020-03-03
本文主要介绍了HBuilderX开发一个简单的微信小程序的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了javascript与jquery动态创建html元素的方法,结合实例形式分析了javascript与jQuery动态创建页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-07-07
js报错 Object doesn''t support this property or method的原因分析
运行js是出现Object doesn't support this property or method 错误的可能原因分析。2011-03-03
这篇文章主要为大家详细介绍了JavaScript纯前端实现语音播报和朗读功能的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了前端取消接口调用的相关资料,讲解了XMLHttpRequest和AbortController两种取消HTTP请求的方法,XMLHttpRequest通过abort()方法取消请求,而AbortController提供了一个更现代和灵活的解决方案,需要的朋友可以参考下2025-03-03
最新评论