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 相关文章推荐
javascript dom追加内容实现示例
Sep 21 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
JavaScript实现筛选数组
Mar 02 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中的类-什么叫类
2006/11/20 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
小学二年级评语
2014/04/21 职场文书
青年志愿者活动方案
2014/08/17 职场文书
导游词开场白
2015/01/31 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015年网管个人工作总结
2015/05/22 职场文书