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之表单验证讲解的更多相关文章

  1. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  3. 第一百五十二节，封装库--JavaScript，表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  4. 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  5. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  6. 第一百四十九节，封装库--JavaScript，表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  7. JavaScript：表单验证模型

    之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...

  8. JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）

    身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...

  9. JavaScript实现表单验证

    表单验证可以通过 JavaScript 来完成 以下示例代码用于判断表单字段(Name)值是否存在,如果存在,则弹出信息,否则阻止表单提交: <!DOCTYPE html> <htm ...

随机推荐

  1. ContactsContract.CommonDataKinds【Translated By KillerLegend】

    http://developer.android.com/reference/android/provider/ContactsContract.CommonDataKinds.html interf ...

  2. C# 委托简单使用方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. 1.python的第一步

    学习python也有一段时间了,自认为基本算是入门了,想要写一些博客进行知识的汇总的时候.却发现不知道该从何说起了,因为python这门语言在语法上其实并不难,关键在于如何建立程序员的思维方式,而对于 ...

  4. Multi-Language IDE for Professional Developers (Komodo)

    Komodo is the professional IDE for major web languages, including Python, PHP, Ruby, Perl, HTML, CSS ...

  5. PBOC规范（2.0->3.0）对照表

    1    数据方面 TAG                                               PBOC2.0                                 ...

  6. android 的生命周期自我理解

    android的active的生命周期,经过网站的blog学习,加上自己的理解总结如下: 第1种:全新的启动应用程序顺序 onCreate--->onStart---->onResume ...

  7. golang构造函数与转换函数

    golang的每种类型, 凡是用type定义的类型, 其类型名既是其构造函数,也是其转换函数. 其中,构造函数后眼{...}, 转换函数后跟(...)

  8. 点击TableView中某行进入下一级界面（Swift）

    TableView这个控件在iOS的开发中非常的常见,他可以较好的展示一个层级结构.这里主要介绍,在点击某个条目的时候,如何进行跳转的下一个界面.以下是官方的关于这个跳转如何去实现,和如何去传递数据的 ...

  9. EntityFramwork(2Database First) 源地址https://msdn.microsoft.com/zh-cn/data/jj193542

    必备条件 要完成本演练,需要安装 Visual Studio 2010 或 Visual Studio 2012. 如果使用的是 Visual Studio 2010,还需要安装 NuGet.     ...

  10. Matlab实现抽样定理

    Matlab实现抽样定理 正弦信号的抽样: 首先时间跨度选择 -0.2 到 0.2,间隔0.0005取一个点,原信号取 sin⁡(2π*60t) ,则频率为60Hz. 由于需要输出原始信号的波形,我选 ...