JS实现的简单表单验证功能完整实例


Posted in Javascript onOctober 14, 2017

本文实例讲述了JS实现的简单表单验证功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com 表单验证</title>
<style type="text/css">
<!--
body,td,th {
  font-size: 12px;
  color: #000000;
}
body {
  background-color: #CCCCCC;
  margin-left: 0px;
  margin-top: 0px;
}
a {
  font-size: 12px;
  color: #666600;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: #000099;
}
a:hover {
  text-decoration: underline;
  color: #6633FF;
}
a:active {
  text-decoration: none;
  color: #00FF00;
}
-->
</style>
  <script type="text/javascript">
    function checkusername()
    {
      var myform = document.getElementById("form1");
      var username = myform.username.value.length;
      if(username < 1||username>12)
      {
        errusername.innerHTML = "<font color='red'>用户名不符合要求</font>";
        return false;
      }else{
        errusername.innerHTML = "<font color='green'>用户名符合要求</font>";
        return true;
      }
    }
    function checkage()
    {
      var myform = document.getElementById("form1");
      var age = myform.age.value;
      if(age != parseInt(age))
      {
        errage.innerHTML = "<font color='red'>年龄不符合要求</font>";
        return false;
      }else{
        errage.innerHTML = "<font color='green'>年龄符合要求</font>";
        return true;
      }
    }
    function checkemail()
    {
      var myform = document.getElementById("form1");
      var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if(!mail.test(myform.email.value))
      {  
        erremail.innerHTML = "<font color='red'>email不符合要求</font>";
        return false;
      }else{
        erremail.innerHTML = "<font color='green'>email符合要求</font>";
        return true;
      }
    }
    function checkform()
    {
      checkusername();checkage();checkemail();
      if(checkusername()&&checkage()&&checkemail())
      {
        return true;  
      }else{
        return false;
      }
    }
  </script>
</head>
<body alink="center">
 <form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">
<table width="777" border="0" cellpadding="1" cellspacing="1">
 <tr>
  <td colspan="3" ><div align="center">请输入你的注册信息</div></td>
 </tr>
 <tr>
  <td width="250" ><div align="right" >请输入你的用户名:</div></td>
  <td width="250"><div align="center">
     <input type="text" name="username" onblur="checkusername()" />  
   </div></td>
  <td><div id="errusername" align="center"></div></td>
 </tr>
 <tr>
  <td width="250"><div align="right">请输入你的年龄:</div></td>
  <td width="250"><div align="center" >
   <label>
   <input type="text" name="age" onblur="checkage()"/>
   </label>
  </div></td>
   <td><div align="center" id="errage"></div></td>
 </tr>
 <tr>
  <td width="250"><div align="right" >请输入你的EMAIL:</div></td>
  <td width="250"><div align="center" >
   <label>
   <input type="text" name="email" onblur="checkemail()" />
   </label>
  </div></td>
   <td><div align="center" id="erremail"></div></td>
 </tr>
 <tr>
  <td><div align="right">
   <label>
   <input type="submit" name="Submit" value="提交" />
   </label>
  </div></td>
   <td><div align="center">
    <label>
    <input type="reset" name="Submit2" value="重置" />
    </label>
   </div></td>
  <td><div align="center"></div></td>
 </tr>
</table>
 </form>
</body>
</html>

运行效果:

JS实现的简单表单验证功能完整实例

Javascript 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
详解Node.js开发中的express-session
May 19 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
vue实现文字加密功能
Sep 27 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 #Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
浅谈vue路径优化之resolve
Oct 13 #Javascript
薪资那么高的Web前端必看书单
Oct 13 #Javascript
vue router demo详解
Oct 13 #Javascript
You might like
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
javascript radio 联动效果
2009/03/04 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
电子专业自荐信
2014/07/01 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
教师考核表个人总结
2015/02/12 职场文书
男生贾里读书笔记
2015/06/30 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
祝寿主持词
2015/07/02 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
清明节随笔
2015/08/15 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python