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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
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
如何在PHP中进行身份认证
2006/10/09 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
迟到检讨书大全
2014/01/25 职场文书
个人投资计划书
2014/05/01 职场文书
营销与策划实训报告
2014/11/05 职场文书
公务员年度考核评语
2014/12/31 职场文书
家长高考寄语
2015/02/27 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
js Proxy的原理详解
2021/05/25 Javascript