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模拟SELECT下拉框取值效果
Oct 23 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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
Home Coffee Roasting
2021/03/03 咖啡文化
php ftp文件上传函数(基础版)
2010/06/03 PHP
php 生成短网址原理及代码
2014/01/23 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
jQuery封装animate.css的实例
2018/01/04 jQuery
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python虚拟环境venv用法详解
2020/05/25 Python
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2015毕业寄语大全
2015/02/26 职场文书
干部培训简讯
2015/07/20 职场文书