用JavaScript校验表单（2）

最新推荐文章于 2024-07-03 20:05:58 发布

heibaigezi

最新推荐文章于 2024-07-03 20:05:58 发布

阅读量183

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/heibaigezi/article/details/79078618

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{
margin: 0 auto;
margin-top: 10%;
width:500px;
height: 300px;
}
</style>
<script>
/*在写密码的提示信息时,我们发现和用户名有很多相似的地方,因此,下面用传参的方式来重写一下屏蔽的参数*/
/*function showTips(){
document.getElementById("userspan").innerHTML="<font color='gray'>用户名必填！</font>";
}
function checkUser(){
var uValue=document.getElementById("user").value;
if(uValue==""){
document.getElementById("userspan").innerHTML="<font color='red'>用户名不能为空！</font>";
}
else{
document.getElementById("userspan").innerHTML="";
}
}*/
function showTips(id,info){
/*id为user的<span>,id命为userspan,这样,只需要将id和"span"拼接起来即可.*/
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
var uValue=document.getElementById(id).value;
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}
else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>

<form action="#" method="get" name="regForm">

<table border="1px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">会员注册</td>
</tr>
<tr>
<td>用户名：</td>
<td>

<input type="text" name="user" id="user" οnfοcus="showTips('user','用户名必填！')" οnblur="check('user','用户名不能为空！')"/>
<span id="userspan"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" id="password" οnfοcus="showTips('password','密码必填！')" οnblur="check('password','密码不能为空！')"/>
<span id="passwordspan"></span>
</td>
</tr>
</table>
</form>

</body>
</html>