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 实现TreeView CheckBox全选效果
Jan 11 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
php实现的简单日志写入函数
2015/03/31 PHP
纯php生成随机密码
2015/10/30 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
vue中element 上传功能的实现思路
2018/07/06 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
大专生简历的自我评价
2013/11/26 职场文书
六年级学生评语大全
2014/12/26 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
画展观后感
2015/06/17 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
搭建Yolov5服务器
2022/04/30 Servers