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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
Yii框架的布局文件实例分析
2019/09/04 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
JavaScript面向对象编程
2008/03/02 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
python如何随机生成高强度密码
2020/08/19 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
充分就业社区汇报材料
2014/05/07 职场文书
财产分割协议书范本
2014/11/03 职场文书
涨价通知怎么写
2015/04/23 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python