<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<style type="text/css">
fieldset {
width: 50%;
margin: auto;
border-radius: 8px;
}
span {
display: block;
}
input {
border: none;
border-bottom: 1px solid #000000;
}
.msg {
color: red;
}
</style>
</head>
<body>
<fieldset>
<legend>注册</legend>
<div>
<span><label>账号：</label><input type="text" name="username" onblur="check(event);"><label class="msg"></label></span>
<span><label>邮箱：</label><input type="text" name="email" onblur="check(event);"><label class="msg"></label></span>
<span><label>手机：</label><input type="text" name="phone" onblur="check(event);"><label class="msg"></label></span>
</div>
</fieldset>
</body>
<script type="text/javascript">
function check(evn) {
var ele = evn.target;
if (ele.value.trim().length == 0) {
ele.style.borderColor = "red";
ele.nextElementSibling.innerText = "该项不可为空";
} else {
ele.style.borderColor = "black";
ele.nextElementSibling.innerText = "";
}
}
</script>
</html>
文本输入提示
猜你喜欢
转载自blog.csdn.net/footprint01/article/details/82789239
今日推荐
周排行