- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 注册页面
- </title>
- <style type="text/CSS">
- .left{ width: 100px; text-align: right; } .right{ width: 800px; } .input{
- width: 400px; height: 30px; }
- </style>
- <script>
- // 获得焦点时 定义两个形参 info 是指为 span 标签添加的内容
- function showTips(id, info) {
- // 找到 id+"span" 标签 在其内加入 < font color='red'>info</font>
- document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>";
- }
- // 失去焦点时
- function check(id, info) {
- // 定义一个变量 获得 id 标签内的内容
- var content = document.getElementById(id).value;
- if (content == "") {
- // 如果获得的内容为空 为后边 span 标签添加 info 提示用户
- document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>";
- } else {
- // 如果不为空 就把空字符串给 span 添加 显示不出来
- document.getElementById(id + "span").innerHTML = "";
- }
- }
- </script>
- </head>
- <body>
- <!-- 确定事件并绑定函数 -->
- <form action="#" method="post" name="longFrom" onsubmit="checkFrom()">
- <table border="0" align="center" cellpadding="0" cellspacing="50">
- <tr>
- <td class="left">
- 用户名
- </td>
- <td class="right">
- <input type="text" class="input" id="user" onfocus="showTips('user','用户名必填')"
- onblur="check('user','用户名不能为空')" />
- <span id="userspan">
- </span>
- </td>
- </tr>
- <tr>
- <td class="left">
- 密码
- </td>
- <td class="right">
- <input type="password" class="input" id="pas" onfocus="showTips('pas','用户名必填')"
- onblur="check('pas','用户名不能为空')" />
- <span id="passpan">
- </span>
- </td>
- </tr>
- <tr>
- <td class="left">
- 确认密码
- </td>
- <td class="right">
- <input type="password" class="input" id="repas" onfocus="showTips('repas','用户名必填')"
- onblur="check('repas','用户名不能为空')" />
- <span id="repasspan">
- </span>
- </td>
- </tr>
- <tr>
- <td class="left">
- </td>
- <td class="right">
- <input type="submit" value="提交" style="padding: 10px;" />
- </td>
- </tr>
- </table>
- </form>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-2972641.html