HTML简单的注册表单验证

已于 2024-05-08 09:59:12 修改
阅读量1k 收藏 21
点赞数 26
分类专栏： HTML 文章标签： html 前端 javascript
于 2024-05-08 09:58:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxyez/article/details/138559878
版权

一、一起了解html语言的魅力

HTML5的出现，为互联网革命带来了前所未有的机遇，同时也彻底改变了我们的生活和工作方式。它是新一代的超文本标记语言，具备更加智能、灵活、功能强大和可扩展的特性。比如，它支持各种媒体类型，包括音频、视频、图像等，还能支持更加丰富全面的Web应用程序。因此，HTML5在互联网领域的发展方向和应用前景非常广阔，是未来互联网应用技术的重要方向之一。

随着移动设备的普及和互联网技术的升级，HTML5已经成为了目前最受欢迎和应用最广泛的技术之一。它可以为各种应用场景提供完美的解决方案，比如响应式网页设计、云计算、社交网络、游戏开发、移动应用程序等。而且，HTML5技术还在不断地发展和创新中，各种新的功能、特性和应用场景也在不断涌现，为互联网带来了更多的可能性和潜力。

然而，HTML5技术的发展和应用也需要付出一定的代价。一方面，HTML5标准比较复杂，需要开发者掌握更多的技术和知识，才能够灵活应用，另一方面，由于各种不同的浏览器和设备厂商对HTML5的支持和实现不同，会带来一定的兼容性问题，需要开发者在应用中做好兼容性处理。

总的来说，HTML5是一种充满活力和创新的技术，为互联网应用和用户提供了更加丰富、便捷、高效的体验。未来，随着技术的不断进步和应用场景的不断拓展，HTML5技术将会变得越来越重要和广泛，它将会带领我们走向更加美好的数字世界。

二.HTML语言主体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title
    </head>
    <body>
               账号：<input type="text" id="zh" οnblur="a1()"><span id="s1">&nbsp*账号长度在5-                       12</span><p>
               密码：<input type="text" id="mm" οnblur="a2()"><span id="s2">&nbsp*密码长度在6-                    18</span><p>
                再次密码：<input type="text" id="mm2"  οnblur="a3()"><span id="s3">&nbsp*两次密                    码 不一致</span><p>
                手机号码：<input type="text" id="tel"  οnblur="a4()"><span id="s4">&nbsp*手机号码                     错 误</span><p>
               邮箱地址：<input type="text" id="eml"  οnblur="a5()"><span id="s5">&nbsp*邮箱格式                   错误</span><p>
               <input type="button" value="登录首页" οnclick="abc()">
    </body>
</html>

二、css样式代码

               <style>
            span{ display: none;
                  font-size:6px;
                  color: red;    }
               </style>

三、javascript代码

  <script>            
            function a1(){
                //失去焦点 onblur
                var zh=document.getElementById("zh").value;
                var s1=document.getElementById("s1");
                if(zh.length<5||zh.length>12){
                    s1.style.display="inline-block";
                }else{
                    s1.style.display="none";
                }
            }
            
            function a2(){
                //失去焦点 onblur
                var mm=document.getElementById("mm").value;
                var s1=document.getElementById("s2");
                if(mm.length<6||mm.length>18){
                    s1.style.display="inline-block";
                }else{
                    s1.style.display="none";
                }
            }
            
            function a3(){
                //失去焦点 onblur
                var mm=document.getElementById("mm").value;
                var mm2=document.getElementById("mm2").value;
                var s1=document.getElementById("s3");
                if(mm2!=mm){
                    s1.style.display="inline-block";
                }else{
                    s1.style.display="none";
                }
            }
            
            function a4(){
                //失去焦点 onblur
                var tel=document.getElementById("tel").value;
                var s1=document.getElementById("s4");
                if(tel.length!=11 ||tel.substring(0,1)!=1){
                    s1.style.display="inline-block";
                }else{
                    s1.style.display="none";
                }
            }
            
            function a5(){
                //失去焦点 onblur
                var eml=document.getElementById("eml").value;
                var s1=document.getElementById("s5");
                if(eml.indexOf("@")==-1 ||eml.indexOf("@")>eml.indexOf(".")){
                    s1.style.display="inline-block";
                }else{
                    s1.style.display="none";
                }
            }
        </script>

四、成品展示

濛甜
关注
  • 26
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML注册页面基础验证
m0_53515074的博客
06-10 1638
验证邮箱格式 正则表达式 /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
HTML+CSS3+JavaScript实现注册登陆表单验证
weixin_30906425的博客
04-27 7316
序 用原生js实现表单验证登陆，这样大家会更好的懂代码，轻松使用。转载代码的博有留下一个关注，这样我会继续 发送跟多炫酷的表单登陆，供给你大家使用，并且实用性比较强。 作者：https://home.cnblogs.com/u/yangslin/ 欢迎大家互关，给新人一点信心 一：实现图 1.登陆页面： 2.注册页面 二：登陆代码以及注册代码 1.login.html代...
基于html注册设计（正则表达式校验）
qq_45171581的博客
03-06 1023
基于html注册设计（正则表达式校验） 一、原示例代码 主界面部分代码 （注册成功后，3秒左右跳转到注册界面） <!DOCTYPE html> <!--设置语言为中文--> <html lang="zh-CN" xmlns:s="http://www.w3.org/1999/XSL/Transform"> <head> <!--设置字体格式为utf-8--> <meta charset="UTF-8"> <
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整注册/登录表单（超实用）轻松搞定注册/登录表单功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手超友好
最新发布
南北极之间
06-16 806
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
html注册验证
zhangge360的专栏
09-08 1051
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 用户注册信息的校验 #BODY{  text-align:center } #TABLE1{     text-align:left;     margin: auto;     float:
html实现注册验证表单,JavaScript实现表单注册、表单验证、运算符功能
weixin_32818919的博客
06-23 977
JavaScript 是世界上最流行的脚本语言。JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。JavaScript 被设计为向 HTML 页面增加交互性。许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。特点：轻量级、通用、可插入html设计、易学J...
HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
热门推荐
射手座轩木酱的代码天地~
05-13 2万+
本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。不过这个时候还没有验证功能，下面将实现这一功能。（用户名/密码格式是否正确）创建一个注册页面，如下图。第一部分：两个段落文本。第三部分：登录/有账号。
html 注册验证码
flj924的专栏
12-12 1495
java代码： public class CaptchaRender implements Serializable{ private static final long serialVersionUID = -916701543933591834L; private static final int WIDTH = 62, HEIGHT = 20; private static fi
html、js简单表单验证
01-27
"html、js简单表单验证"这个主题涉及到的是使用HTML5的内置验证机制以及JavaScript进行客户端的表单验证。下面将详细讲解这两个方面的知识。 首先，HTML5提供了一些内置的表单验证属性，比如`required`、`pattern`...
JQuery实现注册表单实时验证
12-25
总结来说，通过结合jQuery的事件处理、JavaScript的正则表达式以及合理的前端设计，我们可以构建出一个既美观又实用的实时注册表单验证系统。在实际开发中，还应考虑如何处理异步验证（如检查用户名是否已存在）以及...
登录注册验证表单网页模板
01-23
4. **AJAX 技术**：为了提供无刷新的用户体验，登录注册表单可能会使用AJAX技术来异步提交数据。这样，即使在验证失败或服务器响应时，页面也不会完全刷新，从而提升用户体验。 5. **表单提交处理**：表单数据提交...
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id得到input标签节点 var str=usernameNode.value;//获取到input标签框框里面输入的值，是一个字符串 var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符 var ismacth=regExp.test(str);//获得的字符串跟正则表达式做比较 if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式 if(ismacth){//输入的用户名不为空时 document.getElementById("username1").innerHTML="√";//正确时候输出√ document.getElementById("username1").setAttribute("class","duitishi");//设置div标签的class属性为对提示，让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字，字母，下划线"; document.getElementById("username1").setAttribute("class","cuotishi");//设置div标签的class属性为错提示，让它错误的时候显示红色 } }else{//输入的用户名为空时 document.getElementById("username1").innerHTML="请输入用户名"; document.getElementById("username1").setAttribute("class","cuotishi"); } }
注册页面 验证 密码 JavaScript HTML CSS
06-09
一个实现注册页面的详细代码！功能基本实现！
会员注册表单验证HTML模板
05-01
会员注册表单验证HTML模板，有简单表单验证功能，可验证用户名、邮箱、密码、确认密码是否为空。
html表单验证代码网页表单验证
11-29
网页表单验证
前端HTMl用户注册及验证示例
04-13
前端HTMl用户注册及验证示，帮助html JavaScript新手学习者了解并学习用户注册及js验证
简单橙色注册表单网页模板
01-22
【简单橙色注册表单网页模板】是一种设计简洁、色彩鲜明的网页模板，主要用于创建用户注册页面。在网页设计中，注册表单是至关重要的，因为它允许网站收集新用户的信息，以便提供定制服务或建立用户账户。这个模板以...
javascript制作的简单注册模块表单验证
10-24
通常在我们的HTML页面表单中有大量的数据验证工作， 免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段JavaScript代码提供给大家使用。使用起来很简单...
用HTML和JS做简单的注册验证
q626779313的专栏
11-07 913
题目如下： 初学web，主要熟悉一下javascript和简单正则表达式的用法。 <!-- To change this template, choose Tools | Templates and open the template in the editor. -->
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值