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

网络编程 2024/11/17 佚名

3 1 2

本文实例讲述了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>

运行结果：

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript表单(form)操作技巧大全》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS,表单验证

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JS简单表单验证功能完整示例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

关于引入vue.js 文件的知识点总结

JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

评论“JS简单表单验证功能完整示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接