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 相关文章推荐
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
React Router基础使用
Jan 17 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
浅析PHP开发规范
2018/02/05 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
vue中的inject学习教程
2019/04/24 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python生成器的使用方法
2013/11/21 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
python实现教务管理系统
2018/03/12 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
乡镇创先争优活动总结
2014/08/28 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python
Feign调用传输文件异常的解决
2021/06/24 Java/Android