为了账号安全,请及时绑定邮箱和手机立即绑定

点击会员名没有效果为什么

按照老师的代码编写,第一个会员名onfocus就显示不出来,看了好几遍也没看出来原因。还有个问题就是name_msg.innerHTML,这部分内容html里面不是有吗?为什么还要在js中再写一遍呢?求教求教。

html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>表单验证</title>

<link href="css/style.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/main.js"></script>

</head>


<body>

  <form>

    <div>

      <label><span>会员名:</span><input type="text" class="text"/></label>

      <p class="msg"><i class="ati"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名</p>

    </div>

    <div>

      <label><span></span><b id="count">0个字符</b></label>

    </div>

    <div>

      <label>

        <span>登录密码:</span><input type="password" class="text"/>

      </label>

      <p class="msg"><i class="err"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名</p>

    </div>

    <div style="margin:3px 0 10px 0">

      <label>

        <span></span>

        <em class="active">弱</em><em>中</em><em>强</em>

      </label>

    </div>

    <div style="margin-bottom:20px">

      <label>

        <span>确认密码:</span>

        <input type="password" class="text" disabled=""/>

      </label>

      <p class="msg"><i class="ati"></i>请再输入一次</p>

    </div>

    <div>

      <label>

        <span> 验证码:</span><input type="text" class="text" style="width:50px"/>

        <img src="images/get_img.jpg" width="100" height="30"/><a class="changeimg" href="javascript:;" title="重新获取验证码"></a>

      </label>

    </div>

    <div>

      <input class="submitBtn btn" type="submit" value="同意协议并注册"/>

    </div>

  </form>

</body>

</html>

CSS部分

@charset "utf-8";

/*reset*/

*{

margin:0;

    padding:0;

font:12px/1.5 "宋体",“Arial”,"sans-serif","Tahoma";

color:#666;

}

img{

border:none;

}

input,img,label{

vertical-align:middle;

}

input:focus,textarea:focus{

outline:none;

}

.btn{border:none 0;}

.mb10{margin-bottom:10px;}


/*main*/

form{

width:740px;

height:500px;

margin:100px auto;

}

form div{

overflow:hidden;

clear:both;

}

form div label{

float:left;

clear:both;

}

form div label .text{

width:152px;

height:26px;

padding:0 2px;

border:1px solid #ccc;

}

form div label b{

font-weight:normal;

font-size:12px;

color:#ccc;

visibility:hidden;

}

form div em{

display:inline-block;

font-size:12px;

text-align:center;

color:#fff;

vertical-align:middle;

font-style:normal;

width:53px;

height:15px;

line-height:15px;

background:#ffd099;

}

form div .active{

background-color:#ff6600;

}

div span{

display:inline-block;

width:80px;

text-align:right;

}

.submitBtn{

width:135px;

height:33px;

background:url(/images/sprite.png);

color:#fff;

margin:20px 0 0 80px;

}

.changeImg{

width:22px;

height:22px;

display:inline-block;

vertical-align:middle;

background:url(../imges/sprite.png)no-repeat 0-128px

}

.msg{

line-height:12px;

color:#999; 

float:left; 

margin-left:5px; 

display:none;

}

.msg i{

display:inline-block; 

vertical-align:middle; 

width:25px; height:20px; 

background:url(../images/sprite.png)no-repeat;

}

.msg .ati{

background-position:0-71px;

}

.msg .err{

background-position:0-39px;

}

.msg .ok{

background-position:0-99px;

}

js部分

// JavaScript Document

window.onload=function(){

var aInput=document.getElemntsByTagname('input');

var oName=aInput[0];

var pwd=aInput[1];

var pwd2=aInput[2];

var aP=document.getElementsByTagName('p');

var name_msg=aP[0];

var pwd_msg=aP[1];

var pwd2_msg=aP[2];

var count=document.getElementById('count');

var aEm=document.getElemntsByTagName('em');

var re=/[^\w\u4e00-u9fa5]/g;

oName.onfocus=function(){

name_msg.style.display="block";

name_msg.innerHTML='<i class="ati"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名。'

}

oName.onkeyup=function(){

}

oName.onblur=function(){

}

}


正在回答

2 回答

var aInput=document.getElemntsByTagname('input');

这句代码写错了,应该是var aInput=document.getElementsByTagName("input");

注意区分大小写

ame('input');

还有个问题就是name_msg.innerHTML,这部分内容html里面不是有吗?为什么还要在js中再写一遍呢?//都是一样的,没有对错之分


0 回复 有任何疑惑可以回复我~
#1

栀子_ 提问者

这个单词已经改过来了,可是还是没有效果。。。。
2016-12-02 回复 有任何疑惑可以回复我~
#2

慕粉2340001988 回复 栀子_ 提问者

var aEm=document.getElemntsByTagName('em');这句代码也有错,好好看看
2016-12-02 回复 有任何疑惑可以回复我~
var aInput=document.getElemntsByTagname('input');

这句代码写错了,应该是var aInput=document.getElementsByTagname('input');

还有个问题就是name_msg.innerHTML,这部分内容html里面不是有吗?为什么还要在js中再写一遍呢?//都是一样的,没有对错之分

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
表单验证
  • 参与学习       53334    人
  • 解答问题       253    个

表单验证是JavaScript中的高级选项之一,输入框的验证

进入课程

点击会员名没有效果为什么

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信