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 相关文章推荐
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
layui的select联动实现代码
Sep 28 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
JavaScript实现简单动态表格
Dec 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下使用curl模拟用户登陆的代码
2010/09/10 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
简单的js表格操作
2016/09/24 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
js实现移动端轮播图
2020/12/21 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
jQuery实现评论模块
2020/08/19 jQuery
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
家长会邀请书
2014/01/25 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
班主任开场白
2015/06/01 职场文书
警示教育片观后感
2015/06/17 职场文书
大学生党课感想
2015/08/11 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python