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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
中秋联欢会主持词
2015/07/04 职场文书
《搭石》教学反思
2016/02/18 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
MySQL学习之基础命令实操总结
2022/03/19 MySQL