js表单验证

最新推荐文章于 2022-04-19 14:04:56 发布
最新推荐文章于 2022-04-19 14:04:56 发布
阅读量414 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cream_Cicilian/article/details/80406487
版权

大一的时候的工作室作业，事实上这个在后来的项目里运用很多。
这里写图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        span{
            color: red;
            display: none;

        }
        .main{
            width:450px;
            height: 400px;
            /*background-color: pink;*/
            border: 2px solid black;
            position: absolute;
            left: 50%;
            margin-left: -200px;
        }
        p{
            display: inline-block;
            /*background-color: #F0A6CE;*/
            width: 80px;
        }
        .yanzheng{
            width: 150px;
            height: 80px;
            /*background-color: #D15BEA;
            */float: right;
            margin-right: 10px;
        }
        .mm{
            font-family:Arial;
            font-style:italic;
            color:blue;
            font-size:30px;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
            float: right;
            cursor:pointer;
            text-align:center;
            border: 2px solid black;
            width: 140px;
            height: 40px;
            /*background-color: #1B86F7;*/

        }
        .yanzheng a{
            font-size: 12px;
        }
        .ma{
            width: 150px;
            height: 60px;
        /*  background-color: #1B86F7;*/

        }
    </style>
</head>
<body onload="createCode()">
    <div class="main">
        <h2>欢迎注册</h2>
        <form action="https://www.zhihu.com/" id="biaodan" >
            <p>用户名:</p><input type="text" placeholder="请输入不小于2个字符"><span></span><br>
            <p>密码:</p><input type="password" placeholder="密码需要大于6个字符"><span></span><br>
            <p>确认密码：</p><input type="password" disabled=""><span>*两次密码输入不一致</span><br>
            <p>手机号码：</p><input type="text" placeholder="请输入正确中国大陆手机号"><span>*请输入正确中国大陆手机号</span><br>
            <p>验证码：</p><input type="text"><span></span>
            <div class="yanzheng">
                <div class="mm">
                <div class="ma" onclick="createCode()" id="checkCode"></div>
                </div>
                <a href="#" onclick="createCode()">看不清楚，换一张</a>
            </div>
            <br>
            <input type="submit"  id="tijiao">

        </form>
    </div>
<script type="text/javascript">
var oInput=document.getElementsByTagName('input');
var namea=oInput[0];
console.log(namea)
var oPassword=oInput[1];
var checkPassword=oInput[2];
var phone=oInput[3];
var yanZhen=oInput[4];

var oSpan=document.getElementsByTagName('span');
var tishi1=oSpan[0];
var tishi2=oSpan[1];
var tishi3=oSpan[2];
var tishi4=oSpan[3];
var tishi5=oSpan[4];


var oSubmit=document.getElementById('tijiao');
var oBiaodan=document.getElementById('biaodan');



var nameaOK=0;
var oPasswordOK=0;
var checkPasswordOK=0;
var phoneOK=0;
var yanzhengOK=0;

oBiaodan.onsubmit=function(){return false;};
//name
function getLength(str){
    return str.replace(/[xoo-xff]/,"xx").length;
   }
namea.onfocus=function(){  
    tishi1.style.display="inline-block";
}
namea.onkeyup=function(){
      tishi1.style.display="inline-block";
      var name_length=getLength(this.value);
      tishi1.innerHTML=name_length+"个字符";
      tishi1.style.color="red";
}
namea.onblur=function(){
     var name_length=getLength(this.value);
    if(name_length<3){
        tishi1.style.display="inline-block";
        tishi1.innerHTML="！必须输入大于2个字符";
        tishi1.style.color="#BE0C0C";
        nameaOK=0;
    }
    else{
        tishi1.style.display="inline-block";
        tishi1.innerHTML="√";
        tishi1.style.color="#2FF780";
        nameaOK=1;
    }

 fin();
}
//password
oPassword.onfocus=function(){
    tishi2.style.display="inline-block";
}
oPassword.onkeyup=function(){
      tishi2.style.display="inline-block";
      var password_length=getLength(this.value);
      tishi2.innerHTML=password_length+"个字符";
      tishi2.style.color="red";
      if(this.value.length>6){
         checkPassword.removeAttribute("disabled");
       }
       else{
         checkPassword.setAttribute("disabled","true");
       }
}

oPassword.onblur=function(){
    var password_length=getLength(this.value);
    if(password_length<7){
        tishi2.style.display="inline-block";
        tishi2.innerHTML="！必须输入大于6个字符";
        tishi2.style.color="#BE0C0C";
        oPasswordOK=0;
    }
    else{
        tishi2.style.display="inline-block";
        tishi2.innerHTML="√";
        tishi2.style.color="#2FF780";
        oPasswordOK=1;
    }
 fin();
     if(this.value!=checkPassword.value){
        tishi3.style.display="inline-block";
        tishi3.style.color="#BE0C0C";
        tishi3.innerHTML="*两次密码输入不一致";
         checkPasswordOK=0;
    }
    // else{
    //  // tishi3.style.display="inline-block";
    //  // tishi3.innerHTML="√";
    //  // tishi3.style.color="#2FF780";
    //  //    checkPasswordOK=1;
    // }
}
//checkpassword
checkPassword.onblur=function(){

    // console.log(this.value.length);
    if(this.value!=oPassword.value){
        tishi3.style.display="inline-block";
        tishi3.style.color="#BE0C0C";
        tishi3.innerHTML="*两次密码输入不一致";
         checkPasswordOK=0;
    }
    else{
        tishi3.style.display="inline-block";
        tishi3.innerHTML="√";
        tishi3.style.color="#2FF780";
        checkPasswordOK=1;
    }
 fin();
    if(this.value.length<=0){
        tishi3.style.display="inline-block";
        tishi3.style.color="#BE0C0C";
        tishi3.innerHTML="*两次密码输入不一致";
         checkPasswordOK=0;
    }
    // else{
    //  tishi3.style.display="inline-block";
 //        tishi3.style.color="#BE0C0C";
 //        tishi3.innerHTML="*两次密码输入不一致";
 //         checkPasswordOK=0;
    // }
}
//phone
phone.onblur=function(){
    var shu=/\d/;
    var shouji=/^1[34578]\d{9}$/
    if(shouji.test(this.value)){
        if(this.value.length==11){
          tishi4.style.display="inline-block";
          tishi4.innerHTML="√";
          tishi4.style.color="#2FF780";
          phoneOK=1;
        }
        else{
          tishi4.style.display="inline-block";
          tishi4.innerHTML="!请输入正确中国大陆手机号";
          tishi4.style.color="#BE0C0C";
          phoneOK=0;
        } 
    }
    else{
        tishi4.style.display="inline-block";
        phoneOK=0;
    }
    fin();
}






//验证码
 var code;
function createCode() 
{
 code = "";
 var codeLength = 6; //验证码的长度
 var checkCode = document.getElementById("checkCode");
 var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 
      'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
 for(var i = 0; i < codeLength; i++) 
 {
  var charNum = Math.floor(Math.random() * 52);
  code += codeChars[charNum];
 }
 if(checkCode) 
 {
  checkCode.className = "code";
  checkCode.innerHTML = code;
 }
}

// tishi5.innerHTML="请输入验证码";
yanZhen.onblur=function(){
    var inputCode=yanZhen.value;
    if(inputCode.length <= 0) 
   {
     tishi5.style.display="inline-block";
     tishi5.innerHTML="×";
     tishi5.style.color="#BE0C0C";
   }
   else if(inputCode.toUpperCase() != code.toUpperCase()) 
  {
     tishi5.style.display="inline-block";
     tishi5.innerHTML="×";
     tishi5.style.color="#BE0C0C";
     createCode();
   }
    else 
   {
      tishi5.style.display="inline-block";
      tishi5.innerHTML="√";
     tishi5.style.color="#2FF780";
     yanzhengOK=1;  
     fin();
   }




}



function fin(){
    if(nameaOK==1&&oPasswordOK==1&&checkPasswordOK==1&&phoneOK==1&&yanzhengOK==1){  
         oBiaodan.onsubmit=function(){return true;};      
      }
      else{
          oBiaodan.onsubmit=function(){return false;};
      }
}
    </script>
</body>
</html>
一只大喵喵
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js表单验证（简单）
11-07
js表单验证（简单）
Js表单验证
王伯仙的博客
06-27 4309
1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符！"); document.a.b.focus(); return false; } }   2. 只能是汉字   3." 只能是英文 functi
JS表单验证-12个常用的JS表单验证
yoyoosyy的博客
03-17 4426
最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~ 1. 长度限制 1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符！"); document.a.b.focus();
JS-表单验证
gezongbo的博客
03-16 682
表单验证 <!DOCTYPE html> <html lang="en"> <head> <title>表单验证</title> <script> //管理员账号的验证 function checkId(){ //1、获取账号输入框中输入的内容 //2、定义合适的正则表达式,对内容进行验证 //3、根据验证的结果在span中显示提示结果 //通过id找到元素节点 var idNum=
JS表单验证会员信息填写代码
04-07
JavaScript（简称JS）是网页开发中用于实现客户端交互的重要脚本语言，特别是在处理表单验证时，它能提供实时、动态的用户输入检查，避免无效或不完整的数据被提交到服务器。本文将深入探讨如何使用JS进行表单验证，...
javascript表单验证和Window详解
12-11
通过JavaScript表单验证和Window对象，我们可以创建更加动态、交互丰富的Web应用，提供更好的用户体验，同时减轻服务器的负担。在实际开发中，应当根据项目需求灵活运用这些技术，结合HTML5的新特性，实现更加智能和...
js表单验证 全网最全的 表单验证
11-05
本资源集合了全网最全面的JavaScript表单验证方法，覆盖了从基础到高级的各种验证场景。 首先，让我们详细探讨一下`js表单验证`。JavaScript是一种在客户端运行的脚本语言，它可以在用户填写表单时实时检查输入，...
一个完美的js表单验证案例
10-21
"一个完美的js表单验证案例"利用JavaScript（特别是jQuery库）实现了这一功能，提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言，可以直接在用户的浏览器上运行，这使得表单验证可以实时进行，减少...
JavaScript表单验证完美代码
10-20
在讲解JavaScript表单验证的完美代码之前，首先需要了解在前端开发中表单验证的重要性。表单验证是确保用户输入数据的正确性和完整性的重要手段，它能够防止无效或恶意的数据对后端服务器造成损害。JavaScript表单...
简单js表单验证大全
03-28
简单js表单验证大全，一看就懂，超级好用，好学
JS中的表单验证。
Can1997的博客
04-19 2890
HTML部分： <!-- 避免表单在点击按钮的时候页面刷新无法执行JS的问题出现,我们在 action 里面编写一个地址，这个地址是防止跳转的; action="javascript:void(0)"--> <form action="javascript:void(0)" id="login"> <p>账号:&emsp;&emsp;<input type="text" id="email"> &
JS表单验证
PHSXevan的博客
12-12 543
很多页面都会有表单提交，验证表单数据是否正确，是要把表单提交到服务端，跟数据库进行比对。然而有些简单的事情，其实前端就可以先验证一下，比如字符格式，输入长度等信息，通过JS对表单基本情况进行验证，避免每次都要去请求服务端，提高网页性能。 验证的正则表达式根据自己的需求可以自行修改。 简单的写了四个验证，分别是用户名、密码、手机和邮箱。 以下是html结构 span里面的提示信息设置了隐藏，不符合规则时显示，符合规则后隐藏 <form> <label>
JavaScript之表单验证
热门推荐
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
JS表单验证大全
《JS表单验证大全》 本文是一个收录了最全的JS表单验证方式的文档，包含了多种情况下表单验证的方法，以及相应的JS代码实现。其中包括但不限于以下内容： 1. 是否为空：通过JS代码判断表单输入是否为空，提醒用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值