JavaScript简单验证表单空值及邮箱格式的方法


Posted in Javascript onJanuary 20, 2017

本文实例讲述了JavaScript简单验证表单空值及邮箱格式的方法。分享给大家供大家参考,具体如下:

运行效果图如下:

JavaScript简单验证表单空值及邮箱格式的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript 表单验证</title>
<body>
 <h3>(一)验证必填项是否有空值。</h3>
 <form action = "submitpage.html" onsubmit = "return validate_form(this)" method = "post">
 Name:<input type = "text" name = "name" size = "20">
 <input type = "submit" value = "Submit">
 </form>
 <h3>(二)验证Email格式是否正确。</h3>
 <form action = "submitpage.html" onsubmit = "return is_email_form(this)" method = "post">
 Email:<input type = "text" name = "email" size = "20">
 <input type = "submit" value = "OK">
 </form>
 <script>
//判断内容是否为空
 function validate_form(thisform){
  with (thisform){
   if (!validate_required(name,"Name must be filled out!")){
    name.focus();
    return false
   }
  }
 }
 function validate_required(field,alerttxt){
   with (field){
    if (value==null||value==""){
     alert(alerttxt);
     return false
    }else {
     return true
    }
   }
  }
//判断内容是否符合email的格式
function is_email_form(thisform){
 with(thisform){
  if(!checkEmail(email,"Not a valid e-mail address!")){
   email.focus();
   return false;
  }
 }
}
function checkEmail(field, alertText){
 with(field){
  apos = value.indexOf("@");
  dotPos = value.indexOf(".");
  if(apos<1 || dotPos-apos<2){
   alert(alertText);
   return false;
  }else{
   return true;
  }
 }
}
 </script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 #Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 #Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 #Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 #Javascript
JS中from 表单序列化提交的代码
Jan 20 #Javascript
jquery表单验证插件validation使用方法详解
Jan 20 #Javascript
jquery表单插件form使用方法详解
Jan 20 #Javascript
You might like
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
python中定义结构体的方法
2013/03/04 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
访谈节目策划方案
2014/05/15 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
python四种出行路线规划的实现
2021/06/23 Python