JS简单表单验证功能完整示例


Posted in Javascript onJanuary 26, 2020

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

简单js表单验证demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script>
    //当用户名获取焦点时
    function focus_username(){
      document.getElementById("user_res").innerHTML="<font color='#f00'>请输入用户名</font>";
    }
    //当用户名失去焦点时
    function blur_username(){
      var user_value=document.getElementsByName("username")[0].value;
      if(user_value.length===0){
      document.getElementById("user_res").innerHTML="<font color='#f00'>你没有输入用户名</font>";
          return false;
          //判断其长度是否在5~18之间 如果不在就提示用户
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("user_res").innerHTML="<font color='#f00'>用户名长度必须在5-18之间</font>";
          return false;
      }else if(!checkUser(user_value)){
        //用户名还有特殊符号
      document.getElementById("user_res").innerHTML="<font color='#f00'>用户名含有特殊符号</font>";
          return false;
      }else{
        //用户名合法
      document.getElementById("user_res").innerHTML="<font color='#00f'>用户名合法</font>";
          return true;
      }
    }
    //密码获取焦点时
    function focus_password(){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>请输入密码</font>";
    }
    //密码失去焦点时
    function blur_password(){
      var user_value=document.getElementsByName("password")[0].value;
      if(user_value.length===0){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>你没有输入密码</font>";
          return false;
          //判断其长度是否在5~18之间 如果不在就提示用户
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("pass_res").innerHTML="<font color='#f00'>用密码长度必须在5-18之间</font>";
          return false;
      }else{
        //密码合法
      document.getElementById("pass_res").innerHTML="<font color='#00f'>密码合法</font>";
          return true;
      }
    }
     function checkUser(user){
      var arr=["<",">","#","?","%"];
      var arr_length=arr.length;
      var user_length=user.length;
      for(var i=0;i<arr_length;i++){
        for(var j=0;j<user_length;j++){
          if(arr[i]===user.charAt(j)){
            return false;
          }
        }
      }
      //表示用户名合法
       return true;
     }
     //提交提交表单验证
     function checkForm(){
      var user_flag=blur_username();
      var pass_flag=blur_password();
      if(user_flag && pass_flag){
        alert("提交合法表单");
         return true;
      }else{
        alert("输入不合法");
        return false;
      }
     }
  </script>
</head>
<body>












<!--action 参数自定义跳转页面-->
  <form name='form1' onsubmit='return checkForm()' action='index.php'>
    <table width='600' align='center'>
      <tr>
        <td align='right' width='150'>用户名:</td>
        <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td>
        <td><span id="user_res"></span></td>
      </tr>
      <tr>
        <td align='right' width='100'>密码:</td>
        <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td>
        <td><span id="pass_res"></span></td>
      </tr>
      <tr>
        <td></td>
        <td><input type='submit' value='提交' /></td>
      </tr>
    </table>
  </form>
</body>
</html>

运行结果:

JS简单表单验证功能完整示例

Javascript 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
javascript实现数独解法
Mar 14 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 #Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 #Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 #Javascript
详解Vue的ref特性的使用
Jan 24 #Javascript
JavaScript对象原型链原理解析
Jan 22 #Javascript
Node.js学习之内置模块fs用法示例
Jan 22 #Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
初三毕业感言
2015/07/31 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
员工工作心得体会
2019/05/07 职场文书