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 相关文章推荐
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
分析JS中this引发的bug
Dec 12 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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数组内存利用率低和弱类型详细解读
2017/08/10 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Win8下python3.5.1安装教程
2020/07/29 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
C有"按引用传递"吗
2016/09/06 面试题
小学生评语集锦
2014/04/18 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书