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脚本语言在网页中的简单应用
May 13 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python yield使用方法示例
2013/12/04 Python
Python爬取读者并制作成PDF
2015/03/10 Python
Python简单进程锁代码实例
2015/04/27 Python
kali中python版本的切换方法
2019/07/11 Python
python中如何进行连乘计算
2020/05/28 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
安全生产实施方案
2014/02/23 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
辅导员学期工作总结
2015/08/14 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书