详解JavaScript表单验证(E-mail 验证)


Posted in Javascript onMarch 31, 2016

本文为大家分享了JavaScript表单验证,被 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 相关文章推荐
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
js控制input框只读实现示例
Jan 20 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Vue.js基础知识小结
Jan 13 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
js表单验证实例讲解
Mar 31 #Javascript
javascript创建cookie、读取cookie
Mar 31 #Javascript
基于javascript实现全屏漂浮广告
Mar 31 #Javascript
JS深度拷贝Object Array实例分析
Mar 31 #Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 #Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 #Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 #Javascript
You might like
PHP脚本的10个技巧(6)
2006/10/09 PHP
main.php
2006/12/09 PHP
php不用正则采集速度探究总结
2008/03/24 PHP
php cookis创建实现代码
2009/03/16 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
JS Array对象入门分析
2008/10/30 Javascript
brook javascript框架介绍
2011/10/10 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
优秀团队申报材料
2014/12/26 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers