关闭

JavaScript 表单验证

325人阅读 评论(0) 收藏 举报
分类:

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。


http://www.w3school.com.cn/js/js_form_validation.asp

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>

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

JavaScript是什么?JavaScript功能有哪些?

JavaScript,也称ECMAScript,是一种基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言。 最早是在HTML上使用的,用来给HTML网页添加动态功能,由Netscape的LiveScript发展而来的原型化继承的...
  • ruiguang21
  • ruiguang21
  • 2016-12-25 12:04
  • 2954

Javascript 文件操作(整理版)

Javascript 文件操作   一、功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个属性和方法的使用细节前,先来看看这个对...
  • luopeiyuan1990
  • luopeiyuan1990
  • 2013-08-08 09:47
  • 1744

JavaScript的角色巨变和Web技术的发展

曾经JavaScript是职业程序员看不上眼的脚本语言,如今只有高级程序员才能驾驭它。 JavaScript性质和地位的天翻地覆,正是Web技术飞速变化的印证。 最初职业程序员轻视JavaScript,认为它和C、Java这些真正的开发语言相比只是脚本小毛孩(Script Kids)的玩具。那时...
  • starrow
  • starrow
  • 2013-07-01 15:13
  • 5599

解释下 JavaScript 中 this 是如何工作的。

调用一个函数会暂停当前函数的执行,传递控制权和参数给新函数。除了声明时定义的形式参数,每个函数还接收两个附加的参数:this和arguments。参数this在面向对象编程中非常重要,它的值取决于调用的模式。在JavaScript中一个有4中调用模式:方法调用模式、函数调用模式、构造器调用模式和ap...
  • xujie_0311
  • xujie_0311
  • 2015-03-19 20:45
  • 1492

kettle转换中使用javascript例子整理(1)

这些例子在(\data-integration\samples\transformations目录下)
  • man_earth
  • man_earth
  • 2014-09-24 17:14
  • 9148

VBscript和javascript区别以及在哪里该用谁?

在很多论坛中看到关于VBscript和javascript到底应该使用哪个,哪个比较好的问题?  今天我来谈谈我的看法:  服务器端:  大家知道ASP支持这两中脚本语言,也就是在服务器端用哪个都行,但大部分人在服务器  端用VBscr...
  • Chair_
  • Chair_
  • 2014-10-31 15:30
  • 1428

javascript书籍推荐

WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没有学校的正规教育,大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程,目的是给想了解 JavaScript或者是刚接触JavaScript的朋友,介绍如何通过循序渐进的看书来学习javascr...
  • u011665148
  • u011665148
  • 2016-11-09 10:58
  • 873

Javascript可以用来做什么

没有一个语言比Javascript更让我钟爱的了,因为它简单易学却用途多多,自由自然却不散漫。也因为简单易学。所以会写Javascript 人很多,但你要是问会用javascript做什么,普遍的回答是:“注册表单验证...日历控件..ajax...网页特效...”,如你再问还有什么做过其他应用,回...
  • zhang527
  • zhang527
  • 2013-02-22 10:53
  • 1624

javascript新手入门必读书籍推荐

在当下,极多的程序员是通过自学来完成入门以及提升的。对于javascript的学习来说,同样不例外。许多新手入门javascript选择通过视频教程或者论坛交流的方式进行学习,这种方式固然较为轻松和便捷,但在知识的获取上有些碎片化,对于新手来说不是很好。 在javascript的入门阶段,通过书籍...
  • yangnihaozan
  • yangnihaozan
  • 2015-09-08 17:49
  • 16122

最全面的JavaScript调试技巧总结

最全面的JavaScript调试技巧总结
  • qq_26676207
  • qq_26676207
  • 2016-11-17 11:27
  • 2155
    个人资料
    • 访问:274550次
    • 积分:3439
    • 等级:
    • 排名:第11314名
    • 原创:37篇
    • 转载:336篇
    • 译文:0篇
    • 评论:14条