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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
javascript document.referrer 用法
Apr 30 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue 实现微信浮标效果
Sep 01 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 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上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
JS实现前端页面的搜索功能
2018/06/12 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
决心书范文
2014/03/11 职场文书
公司开业庆典主持词
2014/03/21 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
社团活动总结范文
2014/04/26 职场文书
银行求职自荐信范文
2015/03/04 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
redis中lua脚本使用教程
2021/11/01 Redis
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS