<!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>
js显示表单的提交验证
原文地址：https://www.cnblogs.com/www-x/p/9249158.html