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 常用方法总结
Jun 03 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
微信小程序实现星级评价效果
Dec 28 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
第八节--访问方式
2006/11/16 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
Javascript的一种模块模式
2008/03/22 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
音乐专业自荐信
2014/02/07 职场文书
假释思想汇报范文
2014/10/11 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
初中运动会前导词
2015/07/20 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
基于docker安装zabbix的详细教程
2022/06/05 Servers