详解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 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
vue cli 全面解析
Feb 28 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 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
php生成excel文件的简单方法
2014/02/08 PHP
初识PHP
2014/09/28 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
js post提交调用方法
2014/02/12 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
vue-axios使用详解
2017/05/10 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python 描述符(Descriptor)入门
2016/11/20 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
安全生产投入制度
2014/01/29 职场文书
旅游个人求职信范文
2014/01/30 职场文书
签约仪式主持词
2014/03/19 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
打架检讨书
2015/01/27 职场文书
创业计划书详解
2019/07/19 职场文书