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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 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 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
浅说js变量
2011/05/25 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
JavaScript实现简单计算器
2020/03/19 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python并发和异步编程实例
2018/11/15 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Python常用的json标准库
2019/02/19 Python
Python logging设置和logger解析
2019/08/28 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
从python读取sql的实例方法
2020/07/21 Python
如何用python写个模板引擎
2021/01/14 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
工地标语大全
2014/06/18 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript