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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
vue动态路由配置及路由传参的方式
May 23 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
layui中的switch开关实现方法
Sep 03 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
终于听上了直流胆调频
2021/03/02 无线电
smarty实例教程
2006/11/19 PHP
php-fpm配置详解
2014/02/12 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP函数积累总结
2019/03/19 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
Script的加载方法小结
2011/01/12 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery处理json对象
2014/11/03 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
javascript每日必学之封装
2016/02/23 Javascript
js转换对象为xml
2017/02/17 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
详解python中requirements.txt的一切
2017/03/03 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python地震数据可视化详解
2019/06/18 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
如何用python免费看美剧
2020/08/11 Python
编辑个人求职信范文
2013/09/21 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
员工工作表扬信范文
2014/01/13 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
中秋节随笔
2015/08/15 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
灵能百分百第三季什么时候来?
2022/03/15 日漫
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers