html+js表单验证

最新推荐文章于 2023-12-19 11:49:15 发布
最新推荐文章于 2023-12-19 11:49:15 发布
阅读量301 收藏 4
点赞数
文章标签： html5 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyhcczz/article/details/105410346
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS表单验证</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .box{
           width:600px;
          height:550px;
         background-color: pink;
          margin:20%;
         border:1px solid blue;
        }
        .box h2{
            text-align: center;
           font-family:微软雅黑；
          letter-spacing:2em;
   
        }
        #item{
            height:50px;
            padding:5px;
             background-color: pink;
            position: relative;
        }
        #item label{
            font-weight:bold;
            display: inline-block;
            margin-top:10px;
        }
        #item input{
            width:170px;
            height:20px;
            line-height:10px;
            border-radius:5px;
            border:1px solid #ccc;
            position: absolute;
            left:150px;
        }
        #item span{
            color:rgb(97,134,213);
        }
        /*设置placeholder字体颜色*/
       
        .submit{
               width:170px;
            height:30px;
            padding:15px;
            text-align: center;
            border-radius: 5px;
            border:1px solid #ddd;
            margin-left:10px;
            font-size:12px;    
        }
        .reset{
            width:170px;
            height:30px;
            padding: 15px;
            text-align: center;
            border-radius: 5px;
            border:1px solid #ddd;
            margin-left:10px;
            font-size:12px;    
        }
    
       .tip{
           padding: :10px;

        }

input[type="submit"]:hover,input[type="submit"]:hover{
            opacity:.75;
            cursor: pointer;
        }
        input:focus{
            background: #fff;
            border:1px solid #fff;
            box-shadow: 0 0 2px #fff;
            padding-right:50px;
        }/*当该元素获得焦点时，设置背景颜色和背景图片、边框、外阴影和右内边距*/

    </style>
</head>
<body>
<div class="box">
    <h2>员工信息登记表</h2>
    <form action="" id="form">
        <div id="item">
            <label for=""> 用户登录名：</label>
            <input type="text" name="username" id="username" placeholder="用户设置成功后不可修改" required>
            <p class="tip"></p>
        </div>
        <div id="item">
            <label for="">真实姓名：</label>
            <input type="text" name="tname" id="tname"  required>
            <p class="tip"></p>
        </div>
        <div id="item">
            <label for="">真实年龄：</label>
            <input type="text" name="ageNum" id="ageNum" placeholder="请输入年龄" required>
            <p class="tip"></p>
        </div>
        <div id="item">
            <label for="">出生日期  ：</label>
            <input type="date" name="birthdate" id="birthdate" required>
            <p class="tip"></p>
        </div>
       
        <div id="item">
            <label for="">邮箱：</label>
            <input type="text" name="email" id="email" placeholder="请输入正确邮箱格式" required>
            <p class="tip"></p>
        </div>
         <div id="item">
            <label for=""> 身份证号：</label>
            <input type="text" name="idNum" id="idNum" placeholder="请输入身份证号" required>
            <p class="tip"></p>
        </div>
     <div id="item">
            <label for="">手机号码：</label>
            <input type="text" name="phone" id="phone" placeholder="请输入您的手机号码" required>
            <p class="tip"></p>
        </div>
          <div id="item">
            <label for="">幸运颜色：</label>
            <input type="color" name="color" id="color" >
            <p class="tip"></p>
        </div>
          <input type="submit" value="提交" class="submit" id="submit">
            <input type="reset" value="重置" class="reset" id="reset">
     
    </form>
</div>
<script >
 var username=document.getElementById("username");
var tanme=document.getElementById("tname");
var ageNum=document.getElementById("ageNum");
var birthdate=document.getElementById("birthdate");
var email=document.getElementById("email");
var idNum=document.getElementById("idNum");
var phone=document.getElementById("phone");

var submit=document.getElementById("submit");
var form=document.getElementById("form");

var tips=document.querySelectorAll(".tip");
var reg=/正则/;
var test1=false;
var test2=false;
var test3=false;
var test4=false;
var test5=false;
var test6=false;
var test7=false;

//验证用户名，失去焦点时触发
username.οnblur=function(){
    var pattern=/^\w{6,18}$/;
        if(this.value==""){//this指代当前输入框
        tips[0].innerHTML="用户名不能为空";
        tips[0].style.color="red";
        test1=false;
    }else{ if(pattern.exec(this.value)==null){
            tips[0].innerHTML="请输入6-18位数字、字母或下划线";
            tips[0].style.color="red";
            test1=false;
        }else{
            tips[0].innerHTML="格式正确";
            tips[0].style.color="green";
            test1=true;
        }
    }
}

//验证中文名，失去焦点时触发
tname.οnblur=function(){
    var pattern=/^[\u4e00-\u9fa5]{2,5}$/;
    if(this.value==""){//this指代当前输入框
        tips[1].innerHTML="姓名不能为空";
        tips[1].style.color="red";
        test2=false;
    }else{
        if(pattern.exec(this.value)==null){
            tips[1].innerHTML="请输入2-5位中文名";
            tips[1].style.color="red";
            test2=false;
        }else{
            tips[1].innerHTML="格式正确";
            tips[1].style.color="green";
            test2=true;
        }
    }
}
ageNum.οnblur=function(){
  var pattern=/^1[0-9]d/;
    if(this.value==""){//this指代当前输入框
        tips[2].innerHTML="年龄不能为空";
        tips[2].style.color="red";
        test3=false;
    }else{
        if(pattern.exec(this.value)==null){
            tips[2].innerHTML="";
            tips[2].style.color="red";
            test3=false;
        }else{
            tips[2].innerHTML="格式正确";
            tips[2].style.color="green";
            test3=true;
        }
    }
}
birthdate.οnblur=function(){
  var pattern=/^1[0-9]d{1}/;
    if(this.value==""){//this指代当前输入框
        tips[3].innerHTML="出生日期不能为空";
        tips[3].style.color="red";
        test4=false;
    }else{
        if(pattern.exec(this.value)==null){
            tips[3].innerHTML="";
            tips[3].style.color="red";
            test4=false;
        }else{
            tips[3].innerHTML="格式正确";
            tips[3].style.color="green";
            test4=true;
        }
    }
}
//验证身份证，失去焦点时触发
idNum.οnblur=function(){
    var pattern=/^\d{17}[0-9x]$/;
    if(this.value==""){//this指代当前输入框
        tips[5].innerHTML="身份证不能为空";
        tips[5].style.color="red";
        test6=false;
    }else{
        if(pattern.exec(this.value)==null){
            tips[5].innerHTML="身份证格式错误";
            tips[5].style.color="red";
            test6=false;
        }else{
            tips[5].innerHTML="格式正确";
            tips[5].style.color="green";
            test6=true;
        }
    }
}

//验证邮箱，失去焦点时触发
email.οnblur=function(){
    //aa@qq.com
    var pattern=/^\w+@\w+(\.[a-zA-Z_]{2,4})+$/;
    if(this.value==""){//this指代当前输入框
        tips[4].innerHTML="邮箱不能为空";
        tips[4].style.color="red";
        test5=false;
    }else{
        if(pattern.exec(this.value)==null){
            tips[4].innerHTML="邮箱格式错误";
            tips[4].style.color="red";
            test5=false;
        }else{
            tips[4].innerHTML="格式正确";
            tips[4].style.color="green";
            test5=true;
        }
    }
}

//验证手机号，失去焦点时触发
phone.οnblur=function(){
    var pattern=/^\d{11}$/;
    if(this.value==""){//this指代当前输入框
        tips[6].innerHTML="手机号不能为空";
        tips[6].style.color="red";
        test7=false;
    }else{
        if(pattern.exec(this.value)==null){
            tips[6].innerHTML="手机号格式错误";
            tips[6].style.color="red";
            test7=false;
        }else{
            tips[6].innerHTML="格式正确";
            tips[6].style.color="green";
            test7=true;
        }
    }
}

//前面所有数据正确时，才能提交
submit.οnclick=function(){
    if(test1 && test2 && test3 && test4 && test5 && test6 && test7){
        form.submit();
    }else{
        alert("信息填写有误");
    }
}
</script>
</body>
</html>

//效果图如下
在这里插入图片描述

wyhcczz
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript html5实现表单验证
10-22
主要为大家详细介绍了javascript html5实现表单验证的具体代码，感兴趣的小伙伴们可以参考一下
HTML (4) JS实现表单验证
m0_70274796的博客
05-04 380
<input type=“text” class=“textinput” 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 id=“username” name=“username” οnkeyup=“checkUsername();”/> 字母数字下划线1到10位，不能是数字开头 <input type=“password” class=“textinput” id=“password” n...
JavaScript、Html5——表单验证相关
Corn___的博客
09-13 1447
前端表单验证相关
HTML通过JavaScript表单验证
Alan_Lowe
08-13 286
HTML通过JavaScript表单验证 用户在填写表单的时候，我们程序对其进行验证是必须的，随便举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <script> function Check(){ var x = document.
html 表单js验证,JavaScript使用表单元素验证表单
weixin_29326909的博客
06-19 178
第一章:使用JavaScript验证表单JavaScript的主要作用:验证表单1最简单的表单验证-禁止空白的必填项目1.1最简单的HTML结构网站最基础的就是注册,它是一个系统的交互基础.例子:简单列表的html结构账户:密码:确认:1.2绑定验证功能因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck()例子:​ ...
HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
射手座轩木酱的代码天地~
05-13 1万+
本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。不过这个时候还没有验证功能，下面将实现这一功能。（用户名/密码格式是否正确）创建一个注册页面，如下图。第一部分：两个段落文本。第三部分：登录/有账号。
js浏览器html5表单验证
11-27
html5表单添加了很多类型的表单，而且还自带验证的功能。在移动端，手机等设备能够根据不同的input类型弹出不同的键盘，例如iphone弹的键盘 但是由于不同的浏览器对不合法输入提示文案不一致，样式也不一样，并且老...
html5客户端表单验证.zip
07-11
实现效果： html5客户端表单验证，客户端验证，在商城中会大量使用，当你注册会员时、客户端要对表单的数据进行验证，不符合就不发送到后端验证，html5客户端验证，php中文网推荐下载！
JavaScript表单验证完美代码
10-20
用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
HTML----表单验证
xry12354的博客
04-05 1100
包括了表单介绍，表单的高级应用和表单初级验证
【html表单验证 】
qq_56058244的博客
01-05 2448
整理了一个表单验证
2.html5表单验证
weixin_46293452的博客
03-18 1206
html5表单验证 1. html5 基本表单验证特性介绍 form表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
HTML 表单和验证
weixin_44212853的博客
06-16 3145
必填：required。写在input上。鼠标聚焦：刷新时聚焦：autofocus。写在input上。点击提示文字，聚焦到输入框：标题和input 表单不验证，解除required等：表达验证：pattern=“正则表达式 ”历史记录联想：autocomplete=“on/off”表单下拉提示框:注意list="province"和id=“province” search伪类元素美化 number表单设置最大长度，无法使用maxlength等，以下使用js方法 设置步长:点击按
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
热门推荐
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证
html表单验证
最新发布
qianyu040811的博客
12-19 372
【代码】html表单验证。
【HTML】HTML实现简单表单验证（正则表达式、非空判断、输入框提示信息）
A Lucky Boy的博客
02-20 5394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习.
HTML5表单验证
学如逆水行舟，不进则退
03-09 7807
第一步：策划表单功能 首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下： 名称 电子邮件 网站地址 提交按钮 我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢？在这里简单的使用服务器验证，不做进一步的深入了解。 第
HTML前端表单校验的方法
若有所执，必有所成，心之所向，必显光芒
01-20 1666
HTML表单方式校验：Jquery Validate框架校验，JS手写校验
HTML进行表单验证
wr456wr的博客
11-24 5424
文章目录使用JavaScript进行表单验证使用html5自带的特性进行验证： 使用JavaScript进行表单验证 表单样式： <form action="" name="form_login"> <input placeholder="账号" type="text" name="username" class="form_input"> <br> <input placeholder="密码
给我一个完整的用于注册用户的HTML+CSS+JS表单验证代码
04-25
以上代码包含了输入框的HTML代码、表单验证的JS代码以及一些简单的CSS样式。在JS代码部分，我们使用了一个简单的函数来验证输入的邮箱是否为有效的邮件地址，以及通过onsubmit事件来处理表单验证和错误信息的显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值