文本框为空，进行文字提示，js实现的效果

最新推荐文章于 2022-07-18 19:39:56 发布

qq_33205354

最新推荐文章于 2022-07-18 19:39:56 发布

阅读量3.4k

点赞数 5

文章标签： js 前端

本文链接：https://blog.csdn.net/qq_33205354/article/details/80393653

版权

我之前看到过别人写的，忘了是谁的，改成了自己的。大致原理就是每个文本框下面都给一个div，默认值为空，如果文本框为空值，则把div的东西设置为提示的文字。下面是代码

css:

.login{
               border:none;
               background-color: #48ACF8;
               width:260px;
               height:50px;
               line-height: 50px;
               border-radius: 5px;
               font-size:23px;
               color:white;
               margin-top:20px;
               text-align: center;
               margin-left:300px

}

js:

function mySubmit(){
               var name=document.forms[0].name;
               var pwd=document.forms[0].pwd;
               var name_info=document.getElementById("name_info");
               var pwd_info=document.getElementById("pwd_info");
               name_info.innerHTML="";
               pwd_info.innerHTML="";
               if(name.value.length==0){
                    name_info.innerHTML="<font color='red'>*用户名不能为空</font>";
                    name.focus();
                    return ;
                }
                if(pwd.value.length==0){
                    pwd_info.innerHTML="<font color='red'>*密码不能为空</font>";
                    pwd.focus();
                    return ;
                }
                document.forms[0].submit();