详解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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
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
我的论坛源代码(十)
2006/10/09 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中的各种装饰器详解
2015/04/11 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python编程求质数实例代码
2018/01/31 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python基于execjs运行js过程解析
2020/11/27 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
办公室助理岗位职责
2013/12/25 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
运动会加油口号
2014/06/07 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Python 图片添加美颜效果
2022/04/28 Python