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 相关文章推荐
js函数调用常用方法详解
Dec 03 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
Javascript设计模式之原型模式详细
Oct 05 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
论坛头像随机变换代码
2006/10/09 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
小程序实现留言板
2018/11/02 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
python 文件操作删除某行的实例
2017/09/04 Python
python__name__原理及用法详解
2019/11/02 Python
python开发前景如何
2020/06/11 Python
Django数据库迁移常见使用方法
2020/11/12 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
伊琍体标语
2014/06/25 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
python tkinter模块的简单使用
2021/04/07 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏