学习JavaScript,练习其中的案例
一个简单的注册
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> table { margin: 20px auto; background: rgba(126,126,126,.8); text-align: center; } table tr td { padding: 3px; background: #fff; } table tr td:first-child { text-align: left; } table tr:last-child td:first-child { text-align: center; } input[type="text"], input[type="password"] { border: 1px solid #ccc; border-radius: 4px; padding: 8px 5px; outline: none; } select { width: 100px; height: 30px; } </style> </head> <body> <table> <tr> <td>姓名</td> <td><input type="text" name="username" id="username" placeholder="请输入用户名" /></td> </tr> <tr> <td>电话</td> <td><input type="text" name="phone" id="phone" placeholder="请输入电话" /></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pass" id="pass" /></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="apass" id="apass" onblur="checkPass()" /></td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" id="man" value="男" /><label for="man">男</label> <input type="radio" name="sex" id="women" value="女" /><label for="women">女</label> </td> </tr> <tr> <td>学历</td> <td> <select name="school" id="school"> <option value="大学">大学</option> <option value="高中">高中</option> <option value="初中">初中</option> </select> </td> </tr> <tr> <td colspan="2"> <input type="submit" name="submit" id="submit" value="提交" onclick="getId()" /> <input type="reset" name="reset" id="reset" value="重置" /> </td> </tr> </table> <script type="text/javascript"> function $(id){ return document.getElementById(id); } function checkPass(){ var o = ($('pass').value == $('apass').value); if (o) { return true; } else{ alert("密码不一致"); return false; } o = null; } function getId(){ var str = ''; str += "用户名:"; str += $('username').value; str += " 电话:"; str += $('phone').value; str +=' 性别:'; str += $('man').checked ? '男':'女'; str += ' 学历:'; str += $('school').value; alert(str); } </script> </body> </html>