js显示表单的提交验证
Posted 野心家
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js显示表单的提交验证相关的知识，希望对你有一定的参考价值。
<!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> <!-- 作者：[email protected] 时间：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显示表单的提交验证的主要内容，如果未能解决你的问题，请参考以下文章