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 相关文章推荐
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
Js跳出两级循环方法代码实例
Sep 22 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JQuery基础语法小结
2015/02/27 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
js图片上传的封装代码
2017/08/01 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python比较两个列表大小的方法
2015/07/11 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python 命名规范知识点汇总
2020/02/14 Python
python 如何快速复制序列
2020/09/07 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
法学专业个人求职信
2013/09/26 职场文书
班组长工作职责
2013/12/25 职场文书
爱情寄语大全
2014/04/09 职场文书
校本教研活动总结
2014/07/01 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
世界红十字日活动总结
2015/02/10 职场文书
运动会通讯稿200字
2015/07/20 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis