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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
vue中轮训器的使用
Jan 27 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 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
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
JavaScript 的继承
2011/10/01 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python 实现IP子网计算
2021/02/18 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
Java基础知识面试题
2014/03/25 面试题
医药营销个人求职信范文
2014/02/07 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
建国大业观后感800字
2015/06/01 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python