js练习4(注册验证)

最新推荐文章于 2021-09-08 17:23:36 发布
最新推荐文章于 2021-09-08 17:23:36 发布
阅读量159 收藏 1
点赞数 
<html>
    <head>
        <title>注册信息验证</title>
        <style>
            *{font-size:12px;}
            .email{
                background:url("reg2.gif") no-repeat center left;
                padding-left:20px;
            }
            .email1{
                background:url("reg3.gif") no-repeat center left;
                padding-left:20px;
            }
            .email2{
                background:url("reg4.gif") no-repeat center left;
                padding-left:20px;
            }
        </style>
    </head>
    <body>
        <form method="post" action="">
            <table width=400 align=center>
                <caption><h2>博客园注册信息验证</h2></caption>
                <tr>
                    <td width=20% align=right>邮箱：</td>
                    <td width=30%><input type="text" name="email" id="email" /></td>
                    <td width=30% id="emailInfo"></td>
                </tr>
            </table>
        </form>
        <script>
            //邮箱文本框获得焦点和失去焦点
            var email=document.getElementById("email");
            var einfo=document.getElementById("emailInfo");
            
            //获得焦点
            email.onfocus=function(){
                //不为空并且格式正确
                if(email.value!="" && email.value.match(/\w+@\w+.\w+/g)){
                    einfo.innerHTML="<div class='email2'>输入成功!</div>";
                }else{
                    einfo.innerHTML="<div class='email'>请输入电子邮件</div>";
                }
            }
            
            //失去焦点
            email.onblur=function(){
                if(email.value==""){
                    einfo.innerHTML="<div class='email1'>不可为空!</div>";
                }else if(email.value.match(/\w+@\w+.\w+/g)){
                    einfo.innerHTML="<div class='email2'>输入成功!</div>";
                }else{
                    einfo.innerHTML="<div class='email'>E-mail格式错误，请重新输入</div>";
                }
            }
            
        </script>
    </body>
</html>

 

weixin_33709364
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js表单注册验证
不吃鱼的猫
04-14 1471
简单的js登录 javascript代码 function checkname(){ na=form1.yourname.value; if( na.length 12) { divname.innerHTML='长度是1~12个字符'; }else
js练习4：使用HTML5验证博客园注册页面.zip
08-27
js练习4：使用HTML5验证博客园注册页面.zip,js练习4：使用HTML5验证博客园注册页面.zip,js练习4：使用HTML5验证博客园注册页面.zip
原生js —— 表单验证练习（12306注册）
我的博客
09-02 685
12306注册 知识点： ① 获取父元素：对象.parentElement、对象.parentNode ② 获取最后一个子元素：对象.lastElementChild、对象.lastChild ③ 获取第一个子元素：对象.firstElementChild、对象.firstChild ④ 当触发select对象的onchange事件时，其value值为当前所选option元素innerHTML的...
表单验证练习 ---- js篇
RONG_YAO的博客
07-24 835
一、表单登录验证 1.1、登录页面 1.1.1、头部 V id=head><!--首页的头部--> <TABLE width="100%" border=0> <TBODY> <TR> <TD width="55%" rowspan=2> <DIV align=left><IMG...
JavaScript复习 js登录简单实现 dom操作练习
weixin_30532987的博客
02-02 254
js登录简单实现： html源代码： 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 &...
javascript制作的简单注册模块表单验证
10-24
通常在我们的HTML页面表单中有大量的数据验证工作， 免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段JavaScript代码提供给大家使用。使用起来很简单...
JS 注册验证
08-17
"JS 注册验证"是指利用JavaScript来确保用户在注册过程中输入的数据符合预设的规则，从而提高数据质量和用户体验。下面我们将深入探讨这个主题。 一、表单验证的重要性 在注册过程中，确保用户输入的有效性至关重要...
注册页面 验证 密码 JavaScript HTML CSS
06-09
4. **表单验证**：在JavaScript中，我们可以使用`addEventListener`来监听表单的提交事件，然后通过`event.preventDefault()`阻止默认的提交行为，进行自定义的验证处理。对于密码强度的验证，可能需要用到正则...
js代码-javascript练习
07-15
通过以上讲解，我们可以看到"js代码-javascript练习"这个主题涵盖了大量的JavaScript基础知识，无论是初学者还是有经验的开发者，都可以通过练习来提升自己的技能。实际操作这些代码将有助于理解并掌握JavaScript的...
JS实现注册数据验证
qq_45429856的博客
09-08 600
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="index.html" name="myfrm" method="get" onsubmit="return flagSubmit();"> 用&nbsp;&nbsp;
基于JS设计12306登录页面
11-27
废话不多说了，直接给大家贴代码了，具体代码如下所示： <html> <head> [removed] function f_validate() { var username=document.getElementById("uname").value; var passwd=document.getElementById("passwd").value; var yzm=document.getElementById("yzm").value; // var username=document.getElementsByName("uname")[0].value; // var passw
js实现简单的注册验证
10-19
使用js实现简单的对用户名、密码的注册验证。password与repassword的验证。
注册登录验证js
09-10
注册登录js验证代码，javascript学习中关于表单提交和用户输入信息的验证。
js实现注册验证
he626shidizai的博客
04-03 6487
为什么需要表单验证（前端）? 首先我们要保证提交的数据是正确的，但是把信息都交给服务器去做服务器压力就太大了，所以要进行表单验证。 思路分析 通过getElementById()方法获得表单元素的值 通过字符串方法（包括正则式）对数据进行判断 判断失败，利用alert()方法进行提示，返回false；判断成功，返回true进行表单提交 要点 getElementById(‘str’).val...
js简单实现用户注册信息的校验
Test_LD的专栏
03-28 4767
//html register.html 用户注册   @import "css/userRegister.css";                          用户名：                                                                密码：
7（3）用js进行客户端数据有效性验证
一页
06-19 967
submit按钮，用来提交表单，（之前用这个按钮都没有添加事件，直接点击就提交表单了）什么时候会提交表单？如果要用submit按钮，还要注册事件的话，就得这样用：onclick="return checkit();"当check函数return true时，会提交表单，return false的时候，不会提交表单。1.去除空格的js代码 百度javascript 去空格去除所有空格: str = ...
HTML5+Javascript表单注册和验证练习
MyLovelyJay的博客
09-14 3638
//html5.html &lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;表单注册和验证&lt;/title&gt; &lt;script type="t
#JavaScript JQuery 实现新用户注册
koujiaodahanyuan的博客
06-08 4257
阶段1：练习——完成新用户注册页面 • 需求说明 • 验证用户输入内容的有效性 • 文本框获得焦点时，提示文本框中应该输入的内容 • 文本框失去焦点时，验证文本框中的内容，并提示错误信息 用户注册 //验证密码 $("[name=password]").blur(function () { $("#pwdDiv").removeClass(“green”); $("#pwdDiv").removeClass(“red”); var pwd = KaTeX pars
js注册验证
weixin_33736048的博客
03-17 106
function getFocus() //设置用户名文本框获取焦点 { document.getElementById("txtuname").focus(); } function checkname() //检查用户名 { var myname=document.getElementById("txtuname").value; var my...
javascript客户端数据验证
最新发布
09-10
JavaScript 客户端数据验证可以通过以下几种方式来实现： 1. 表单验证：在表单提交之前，通过 JavaScript 对用户输入的数据进行验证。可以使用 HTML5 自带的表单验证属性，如 `required`、`pattern`、`min`、`max` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值