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>
JavaScript之表单验证讲解的更多相关文章
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...
- 第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- 第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- JavaScript：表单验证模型
之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...
- JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）
身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...
- JavaScript实现表单验证
表单验证可以通过 JavaScript 来完成 以下示例代码用于判断表单字段(Name)值是否存在,如果存在,则弹出信息,否则阻止表单提交: <!DOCTYPE html> <htm ...
随机推荐
- [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- Java 第七天 动态代理
代理类需实现InvocationHandler接口: public interface InvocationHandler { public Object invoke(Object proxy,Me ...
- Python核心编程--学习笔记--7--字典和集合
本章介绍Python语言中的映射类型(字典)和集合类型,包括操作符.工厂函数.内建函数与方法. 1 字典 字典是Python中唯一的映射类型——键key直接映射到值value.字典是容器类型,其对象是 ...
- WPF之旅（二）- XAML
什么是XAML XAML(Extensible Application Markup Lanaguage的简写,发音“zammel”)是用于实例化.NET对象的标记语言.尽管XAML是一种可以用于诸多 ...
- VBA赋值给指定单元格
这是一个Range对象基本操作实例,对指定单元格赋值,然后使用弹窗获取值. 代码如下: Sub test1() Worksheets( MsgBox "工作表Sheet1内单元格A5中的值为 ...
- 【6.24-AppCan移动开发大会倒计时】科大讯飞来了！
6.24 AppCan移动开发者大会进入倒计时,报名通道即将关闭! 50多家移动圈服务商将出席此次大会,讯飞开放平台也将作为参展商,为参会者带去前沿的语音技术.参会者可现场体验最新连续语音识别技术,识 ...
- Windows下使用Visual Studio Code搭建Go语言环境
1.安装GO语言 下载地址: https://golang.org/dl/ Windows下直接运行安装GO语言即可. 安装成功. 安装完毕GO语言后,需要添加GOPATH环 ...
- MongoDB 数据类型
MongoDB支持许多数据类型的列表下面给出: String : 这是最常用的数据类型来存储数据.在MongoDB中的字符串必须是有效的UTF-8. Integer : 这种类型是用来存储一个数值.整 ...
- Paragon NTFS for Mac免费获取官方赠送正版.更新获取ntfs for mac 14方法
Paragon NTFS for Mac免费获取官方赠送正版,没有这个软件的朋友赶紧收下.获取地址http://www.paragon-drivers.com/cn/ntfs-mac-free/ntf ...
- 如何用nodejs写入mysql 的blob格式的数据
So, if the array length equals 4, then the size of blob data in mysql DB must be 4 bytes. And it wor ...