javascript表单验证使用示例(javascript验证邮箱)


Posted in Javascript onJanuary 07, 2014

被 JavaScript 验证的这些典型的表单数据有:

用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

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>
<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中利用数组实现的循环队列代码
Jan 24 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
整理一下常见的IE错误
Nov 18 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 #Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 #Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 #Javascript
form表单action提交的js部分与html部分
Jan 07 #Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 #Javascript
javascript计时器事件使用详解
Jan 07 #Javascript
javascript创建和存储cookie示例
Jan 07 #Javascript
You might like
PHP中几个常用的魔术常量
2012/02/23 PHP
10条php编程小技巧
2015/07/07 PHP
php输出图像的方法实例分析
2017/02/16 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python如何爬取动态网站
2020/09/09 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
幼儿园庆六一游园活动方案
2014/01/29 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
村党支部公开承诺书
2014/05/29 职场文书
校园安全学习心得体会
2016/01/18 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
python not运算符的实例用法
2021/06/30 Python