用html写input输入框?

发布网友 发布时间:2022-04-23 06:07

我来回答

2个回答

热心网友 时间:2022-04-19 07:03

演示图如下:

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

<!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>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 class="mail">    

<div class="send">    

<div class="sendbox">    

<form action="#" method="get" class="messages">    

<div class="messlist">    

<label>姓名</label>    

<input type="text" placeholder="姓名" id="input1" onblur="jieshou()"/>    

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

<div id ="label1">√正确</div>    

<div id ="label2">×错误</div>    

<div class="clears"></div>    

</div>    

<div class="messlist">    

<label>电子邮件</label>    

<input type="text" placeholder="电子邮件" id="input2" onblur="mailtext()"/>    

<div id ="label3">√正确</div>    

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

<div id ="label5">*必填</div>    

<div class="clears"></div>    

</div>    

<div class="messlist">    

<label>手机号</label>    

<input type="text" placeholder="手机号" id="input3" onblur="phonetext()"/>    

<div id ="label6">√正确</div>    

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

<div class="clears"></div>    

</div>    

<div class="messlist textareas">    

<label>留言内容</label>    

<textarea placeholder="说点什么吧..." id="input4" onblur="content()"></textarea>    

<div id ="label8">√</div>    

<div id ="label9">×</div>    

<div id ="label10">* 必填</div>    

<div class="clears"></div>    

</div>    

<div class="messlist yzms">    

<label>验证码</label>    

<input type="text" placeholder="验证码" id="input5" />    

<img src="../images/code.jpg" width="" height="27" class="yzmimg" />    

<div class="clears"></div>    

</div>    

<div class="messsub">    

<input type="submit" value="提交" onclick="send()"style="background:#00a3eb;color:#fff;" />    

<input type="reset" value="重填" />    

</div>    

</form>     

<script>    

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>    

<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>    

<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>    

<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>    

</script>    

<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>    

</div>    

</div>    


(---------满意采纳奥---------)

热心网友 时间:2022-04-19 08:21

<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>

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com