- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script type="text/javascript">
- document.onkeydown=function(event){
- // 获取键盘的回车键
- if(event.keyCode==13){
- var sh=show();
- if(sh!=false){
- // 如果非空验证通过, 则提交表单
- document.forms[0].submit();
- }
- }
- }
- function show(){
- // 获取用户名
- var name=document.getElementById('username');
- // 获取密码
- var pwd=document.getElementById('password');
- // 获取确认密码
- var repwd=document.getElementById('repassword');
- // 获取年龄
- var ageObj=document.getElementById('age');
- // 获取学历
- var eduObj=document.getElementById('edu');
- // 验证用户名是否为非空, 如果为空
- if(''== name.value || null == name.value || name.value.trim() ==''){
- // 获取提示信息行
- var userSpanObj = document.getElementById('userSpan');
- // 打印提示信息
- userSpanObj.innerHTML = "<font color='red'> 用户名不能为空!!!</font>";
- // 获取鼠标焦点
- name.focus();
- return false;
- }else{
- // 如果为非空, 获取提示信息行
- var userSpanObj = document.getElementById('userSpan');
- // 提示信息为空
- userSpanObj.innerHTML = "";
- }
- // 验证密码是否为非空, 如果为空
- if(''== pwd.value || null == pwd.value || pwd.value.trim() ==''){
- // 获取提示信息行
- var pwdSpanObj = document.getElementById('pwdSpan');
- // 打印提示信息
- pwdSpanObj.innerHTML = "<font color='red'> 密码不能为空!!!</font>";
- // 获取鼠标焦点
- pwd.focus();
- return false;
- }else{
- // 如果为非空, 获取提示信息行
- var pwdSpanObj = document.getElementById('pwdSpan');
- // 提示信息为空
- pwdSpanObj.innerHTML = "";
- }
- // 验证确认密码是否为非空, 如果为空
- if (''== repwd.value || null == repwd.value || repwd.value.trim() =='') {
- // 获取提示信息行
- var repwdSpanObj = document.getElementById('repwdSpan');
- // 打印提示信息
- repwdSpanObj.innerHTML = "<font color='red'> 确认密码不能为空!!!</font>";
- // 获取鼠标焦点
- repwd.focus();
- return false;
- } else{
- // 如果为非空, 获取提示信息行
- var repwdSpanObj = document.getElementById('repwdSpan');
- // 提示信息为空
- repwdSpanObj.innerHTML = "";
- }
- // 如果密码的输入不一致
- if (repwd.value!=pwd.value) {
- // 获取提示信息行
- var repwdSpanObj = document.getElementById('repwdSpan');
- // 打印提示信息
- repwdSpanObj.innerHTML = "<font color='red'> 密码不一致!!!</font>";
- // 获取鼠标焦点
- repwd.focus();
- return false;
- } else{
- // 如果密码的输入一致, 获取提示信息行
- var repwdSpanObj = document.getElementById('repwdSpan');
- // 提示信息为空
- repwdSpanObj.innerHTML = "";
- }
- // 验证年龄是否为非空, 如果为空
- if(''== ageObj.value || null == ageObj.value || ageObj.value.trim() ==''){
- // 获取提示信息行
- var ageSpanObj = document.getElementById('ageSpan');
- // 打印提示信息
- ageSpanObj.innerHTML = "<font color='red'> 年龄不能为空!!!</font>";
- // 获取鼠标焦点
- ageObj.focus();
- return false;
- }else{
- // 如果为非空, 获取提示信息行
- var ageSpanObj = document.getElementById('ageSpan');
- // 提示信息为空
- ageSpanObj.innerHTML = "";
- }
- // 如果 option 的属性 value 为 0, 则意味着未选择
- if(0==eduObj.value){
- var eduSpanObj = document.getElementById('eduSpan');
- eduSpanObj.innerHTML = "<font color='red'> 学历不能为空!!!</font>";
- return false;
- }else{
- var eduSpanObj = document.getElementById('eduSpan');
- eduSpanObj.innerHTML = "";
- }
- return true;
- }
- </script>
- </head>
- <body>
- <!--
- 作者: blowing1inthewind@126.com
- 时间: 2018-07-01
- 描述: 表单的提交方式必须为 get 方式
- -->
- <form action="demo04.html" method="get">
- <table align="center" width="500px" border="0">
- <tr>
- <td > 用户名:</td>
- <td><input type="text" id="username" name="username"/></td>
- <td>
- <span id="userSpan"></span>
- </td>
- </tr>
- <tr>
- <td > 密码:</td>
- <td><input type="password" id="password" name="password"/></td>
- <td>
- <span id="pwdSpan"></span>
- </td>
- </tr>
- <tr>
- <td > 确认密码:</td>
- <td><input type="text" id="repassword" name="repassword"/></td>
- <td>
- <span id="repwdSpan"></span>
- </td>
- </tr>
- <tr>
- <td > 年龄:</td>
- <td><input type="text" id="age" name="age"/></td>
- <td>
- <span id="ageSpan"></span>
- </td>
- </tr>
- <tr>
- <td > 性别:</td>
- <td>
- <input type="radio" name="sex" checked="checked"/> 男
- <input type="radio" name="sex"/> 女
- </td>
- </tr>
- <tr>
- <td > 学历:</td>
- <td>
- <select id="edu" name="edu">
- <option value="0">-- 请选择 --</option>
- <option value="1"> 小学 </option>
- <option value="2"> 中学 </option>
- <option value="3"> 大学 </option>
- </select><br/>
- </td>
- <td>
- <span id="eduSpan"></span>
- </td>
- </tr>
- <tr>
- <td colspan="3" align="center">
- <input type="submit" value="注册" onclick="return show()" />
- <!--<button onclick="return show()"> 注册 </button>-->
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2666301.html