用html写input输入框？

用html写一个input输入框，然后通过javascript验证是否为数字。不弹框提示，而是在输入框旁边用红色文字提示错误信息，如果正确，显示绿色√

推荐答案 2019-11-18

演示图如下：

用到的是js和正则表达式代码如下：

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

<head>

<title>html留言表单验证</title>

<style>

*{margin:0px;padding:0px;}

body{background-color:#f9f9f9;}

.clears{ clear:both;}

/*messages*/

.messages{padding:15px 0;}

.messages input,.messages select,.messages textarea{margin:0;padding:0; background:none; border:0; font-family:"Microsoft Yahei";}

.messlist {height:30px;margin-bottom:10px;}

.messlist label{float:left;width:100px; height:30px; font-size:14px; line-height:30px; text-align:right;padding-right:10px;}

.messlist input{float:left;width:300px;height:28px;padding-left:5px;border:#ccc 1px solid;}

.messlist.textareas{ height:auto;}

.messlist textarea{float:left;width:400px; height:110px;padding:5px;border:#ccc 1px solid;}

.messlist.yzms input{width:100px;}

.messlist.yzms .yzmimg{ float:left;margin-left:10px;}

.messsub{padding:0px 0 0 110px;}

.messsub input{width:100px; height:35px; background:#ddd; font-size:14px; font-weight:bold; cursor:pointer;margin-right:5px}

.messsub input:hover{ background:#f60;color:#fff;}

#label0{display:none;color:#0aa770;height:28px;line-height:28px;}

#label1{display:none;color:#0aa770;height:28px;line-height:28px;}

#label2{display:none;color:#0aa770;height:28px;line-height:28px;}

#label3{display:none;color:#0aa770;height:28px;line-height:28px;}

#label4{display:none;color:#0aa770;height:28px;line-height:28px;}

#label5{display:none;color:#0aa770;height:28px;line-height:28px;}

#label6{display:none;color:#0aa770;height:28px;line-height:28px;}

#label7{display:none;color:#0aa770;height:28px;line-height:28px;}

#label8{display:none;color:#0aa770;height:48px;line-height:48px;}

#label9{display:none;color:#0aa770;height:48px;line-height:48px;}

#label10{display:none;color:#0aa770;height:48px;line-height:48px;}

</style>

</head>

<body>

<br>

<div id ="label0">*你还没填写名字呢!</div>

</div>

<div id ="label4">×邮箱地址错误</div>

</div>

<div id ="label7">×手机号码错误</div>

</div>

</div>

</div>

</div>

</form>

function send(){

var name = document.getElementById("input1").value;

var mail = document.getElementById("input2").value;

var phone = document.getElementById("input3").value;

var content = document.getElementById("input4").value;

var code = document.getElementById("input5").value;

if(name=="")

{

label2.style.display = 'none';

label1.style.display = 'none';

label0.style.display = 'block';;

return false;

}

if(mail=="")

{

label3.style.display = 'none';

label4.style.display = 'none';

label5.style.display = 'block';;

return false;

}

if(content=="")

{

label8.style.display = 'none';

label9.style.display = 'none';

label10.style.display = 'block'; //*必填

return false;

}

if(code=="")

{

alert('请填写验证码！');

return false;

}

else{

alert('信息已发送到站长邮箱，感谢您的支持！');

}

</script>

function jieshou(){

var label1 = document.getElementById("label1");

var label2 = document.getElementById("label2");

var nametext = document.getElementById("input1").value;

if(nametext!=""){

label0.style.display = 'none';

label1.style.display = 'block';

label2.style.display = 'none';

}

else{

label0.style.display = 'block';

label1.style.display = 'none';

label2.style.display = 'none';

}

</script>

function mailtext(){

var mailvalue = document.getElementById("input2").value;

var mailtext = document.getElementById("input2");

var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

if(mailvalue!=""){ //邮箱如果非空显示正确

label5.style.display = 'none';

label3.style.display = 'block';//显示正确

label4.style.display = 'none';

}

else{

label5.style.display = 'block';//显示*必填

label3.style.display = 'none';

label4.style.display = 'none';

return false;

}

//上面为一段

if(!myreg.test(mailvalue)){ //既而正则表达式验证邮箱如果不是邮箱地址label4显示出来

label3.style.display = 'none';

label4.style.display = 'block'; //*邮箱地址错误

return false;

}

else{

label3.style.display = 'block';

label5.style.display = 'none';

label4.style.display = 'none';

}

//上面为一段

}

</script>

function phonetext(){

var phonetext = document.getElementById("input3").value;

if(!(/^1[3|4|5|7|8]\d{9}$/.test(phonetext))){

label6.style.display = 'none';

label7.style.display = 'block'; //*手机号码错误

return false;

}

else{

label6.style.display = 'block';

label7.style.display = 'none';

}

</script>

function content(){

var content = document.getElementById("input4").value;

if(content!=""){

label8.style.display = 'block';

label9.style.display = 'none';

label10.style.display = 'none'; //*必填

return false;

}

else{

label8.style.display = 'none';

label9.style.display = 'none';

label10.style.display = 'block';

}

</script>

</div>

（---------满意采纳奥---------）

温馨提示：答案为网友推荐，仅供参考

当前网址：http://77.wendadaohang.com/zd/G3WIGNYGWYYqpqYGWYv.html

其他回答

第1个回答 2019-11-18

<input type="text" name="txt" onchange="validate(this)"/> <span id="txt_msg"></span>
<script>
function validate(e){
var msg = document.getElementById(e.name+'_msg')
if(isNaN(e.value)){
msg.innerHTML="你输入的不是数字";
msg.style.color="red";
}else{
msg.innerHTML="很棒，你输入的是数字";
msg.style.color="green";
}
}
</script>本回答被提问者采纳

相似回答

大家正在搜