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>
分享到：
相关推荐
本文将深入探讨"javascript表单验证方式一"，介绍如何利用JavaScript进行表单验证，确保用户输入的数据符合预设规则，提高用户体验，同时也减轻了服务器端的压力。 首先，表单验证的基本目标是检查用户在HTML表单中...
总的来说，"javascript表单验证器三方库.zip" 提供了一个强大的工具，用于处理JavaScript表单验证，它具有可配置性、递归数据验证等特性，是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...
这个"JavaScript表单验证模板"是一个实用的工具，适合初学者学习和快速实现表单数据验证功能。表单验证是确保用户输入符合特定规则的关键步骤，它可以防止无效数据提交到服务器，提高用户体验，并减少服务器端处理...
JavaScript表单验证是Web开发中的一个关键环节，它主要用于确保用户在提交数据前输入的信息符合预设的格式和规则，从而提高数据质量和用户体验。在HTML表单中，我们经常使用JavaScript来实现动态验证，因为这种...
首先，JavaScript表单验证的基本步骤包括： 1. **获取表单元素**：通过`document.getElementById`或`document.querySelector`等方法获取表单元素，例如`<input>`、`<select>`和`<textarea>`等。 2. **添加事件监听...
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
"强大JavaScript表单验证"这个主题旨在教你如何有效地利用JavaScript来确保用户提交的数据符合预期的格式和规则，从而提高网站的安全性和用户体验。 1. **表单验证的重要性**：在网页上，表单用于收集用户的个人...
"JavaScript表单验证大全"这个主题涵盖了许多关于如何使用JavaScript有效地验证用户输入的重要概念。表单验证是确保用户提交的数据符合预设规则的关键步骤，它能防止无效数据进入数据库，提升用户体验，并减少服务器...
以下是对给定文件中涉及的一些JavaScript表单验证技术的详细解释： 1. 长度限制：通过检查`value.length`属性来限制文本框的字符数。例如，`if(document.a.b.value.length>50)`检查输入的长度是否超过50个字符，...
"JavaScript表单验证控制代码大全"是一个集成了多种表单验证技术和策略的资源集合，帮助开发者有效地确保用户输入的数据质量和安全性。下面我们将深入探讨这个主题，了解JavaScript如何对表单数据进行验证以及常见的...
### JavaScript表单验证知识点详解 #### 一、前言 在Web开发中，表单验证是确保用户输入数据准确性和安全性的关键步骤。通过前端JavaScript进行初步的数据验证，可以极大地提高用户体验并减轻后端服务器的压力。本...
JavaScript表单验证类是Web开发中的重要组成部分，主要用于在用户提交数据前检查输入的有效性和完整性。这个类通常包含了各种验证规则，如非空检查、邮箱格式验证、手机号码验证等，确保用户输入的数据符合预设的...
通过本文的介绍，你应该能够理解并实现基本的JavaScript表单验证。记住，验证是提高应用质量和用户体验的重要步骤。始终确保你的验证逻辑既严格又用户友好。 通过不断的实践和学习，你可以掌握更复杂的验证技巧，...
通过以上分析，我们可以看到JavaScript在前端表单验证中的重要作用。合理利用JavaScript可以显著提升用户体验，并确保数据的有效性和安全性。同时，随着技术的发展，开发者们也在不断探索更高效、更安全的验证策略。
标题：“Javascript表单验证大全” 描述详解：这篇文章深入探讨了如何利用JavaScript进行前端表单的验证，涵盖了多种常见的验证需求，旨在确保用户输入的数据符合预期的格式和规则，从而提高用户体验并减少后端处理...
JavaScript表单验证控件Validator v1.05是一款用于网页前端数据验证的工具，它能够帮助开发者在用户提交表单前检查输入的数据是否符合预设的规则，从而提高用户体验并减少服务器端的压力。该控件通常包含一系列的...
JavaScript表单验证是Web开发中的一个关键环节，它在用户提交数据到服务器之前对输入进行检查，确保数据的完整性和准确性。在这个“改进后的javascript表单验证”中，我们将探讨如何提升用户体验，增强验证功能，并...