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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
javascript 写类方式之八
Jul 05 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
vue之nextTick全面解析
May 17 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
Vue实现浏览器打印功能的代码
Apr 17 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
js数组依据下标删除元素
2015/04/14 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python装饰器用法实例总结
2018/05/26 Python
python 三元运算符使用解析
2019/09/16 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
泰国在线书店:SE-ED
2020/06/21 全球购物
岗位廉洁从政承诺书
2014/03/27 职场文书
答谢会策划方案
2014/05/12 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
博士论文答辩开场白
2015/06/01 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python