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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
JavaScript实现区块链
Mar 14 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
vue 解决provide和inject响应的问题
Nov 12 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提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python列表append和+的区别浅析
2015/02/02 Python
Python函数式编程
2017/07/20 Python
简单谈谈python中的语句和语法
2017/08/10 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
Shell编程面试题
2016/05/29 面试题
幼儿园中班下学期评语
2014/04/18 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
平安建设工作方案
2014/06/02 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js