DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例
来源：互联网 发布：广西网络广播电视台 tv 编辑：程序博客网 时间：2024/05/16 12:49
前端用户提交信息验证
前端和用户交互，对于用户提交的信息，一定是需要验证的。比如一个注册页面，要验证用户名是否非法、用户两次输入密码是否一致等。而且我们在验证的时候，最好是当用户输入完用户名就直接提示用户，用户名是否合法。这些细节。大致如图 
下面是代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单提交验证</title> <style type="text/css"> input { width: 150px; height: 20px } body { background-color: #00FFFF; } </style> <script type="text/javascript"> function check1(){ //验证用户名是否合法：至少有4个连着英文字母 var reg = /[a-z]{4}/i; //拿到用户输入的value var value= document.getElementById("id1").value; var sUser = document.getElementById("spanUser"); if(reg.test(value)){//成功在后面显示绿色字体合法 sUser.innerHTML ="用户名可以使用".fontcolor("green"); }else{ sUser.innerHTML ="用户名不合法".fontcolor("red"); } } function check2(){ //验证密码是否合法：全为数字，长达至少6位 var reg = /\d{6,8}/; //拿到用户输入的value var value= document.getElementById("id2").value; var sUser = document.getElementById("spanPwd1"); if(reg.test(value)){//成功在后面显示绿色字体合法 sUser.innerHTML ="密码可以使用".fontcolor("green"); }else{ sUser.innerHTML ="密码长度不合法".fontcolor("red"); } } function check3(){ //拿到第一次输入的密码 var pwd1 = document.getElementById("id2").value; //拿到第二次密码 var pwd2 = document.getElementById("id3").value; var sUser = document.getElementById("spanPwd2"); if(pwd2==pwd1){ sUser.innerHTML ="恭喜，密码可用".fontcolor("green"); }else{ sUser.innerHTML ="两次密码不一致".fontcolor("red"); } } </script> </head> <body> <form action="form1.html"> <br>用户名： <input id="id1" type="text" onblur="check1()" /><span id="spanUser"></span><br/> 密码： <input id="id2" type="password" onblur="check2()"/><span id="spanPwd1"></span><br/> 确认密码：<input id="id3" type="password" onblur="check3()"/><span id="spanPwd2" ></span><br/> <input type="submit" value="注册"> </form> </body></html>这个时候我们发现一个很大的问题：即使用户输入的信息有误、非法。我们仅仅是提示了用户信息非法，但是我们并没有控制表单提交，当信息非法时，照样可以提交。这个时候就需要我们控制一下。有两种方式：
第一种方式：提交前用一个函数控制
主要是把表单那儿改一下就好了
<form action="form1.html" onsubmit="return checkForm();">这个时候非法的就提交不了了
整页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单提交验证</title> <style type="text/css"> input { width: 150px; height: 20px } body { background-color: #00FFFF; } </style> <script type="text/javascript"> // 3个用来记录 用户输入信息是否合法的 变量 var boo1=false; var boo2=false; var boo3=false; function check1(){ //验证用户名是否合法：至少有4个连着英文字母 var reg = /[a-z]{4}/i; //拿到用户输入的value var value= document.getElementById("id1").value; var sUser = document.getElementById("spanUser"); if(reg.test(value)){//成功在后面显示绿色字体合法 sUser.innerHTML ="用户名可以使用".fontcolor("green"); boo1 = true; }else{ sUser.innerHTML ="用户名不合法".fontcolor("red"); boo1 = false; } } function check2(){ //验证密码是否合法：全为数字，长达至少6位 var reg = /\d{6,8}/; //拿到用户输入的value var value= document.getElementById("id2").value; var sUser = document.getElementById("spanPwd1"); if(reg.test(value)){//成功在后面显示绿色字体合法 sUser.innerHTML ="密码可以使用".fontcolor("green"); boo2 = true; }else{ sUser.innerHTML ="密码长度不合法".fontcolor("red"); boo2 = false; } } function check3(){ //拿到第一次输入的密码 var pwd1 = document.getElementById("id2").value; //拿到第二次密码 var pwd2 = document.getElementById("id3").value; var sUser = document.getElementById("spanPwd2"); if(pwd2==pwd1){ sUser.innerHTML ="恭喜，密码可用".fontcolor("green"); boo3 = true; }else{ sUser.innerHTML ="两次密码不一致".fontcolor("red"); boo3 = false; } } function checkForm(){ //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发 if(boo1&&boo2&&boo3){ return true; }else{ return false; } } </script> </head> <body> <form action="form1.html" onsubmit="return checkForm();"> <br>用户名： <input id="id1" type="text" onblur="check1()" /><span id="spanUser"></span><br/> 密码： <input id="id2" type="password" onblur="check2()"/><span id="spanPwd1"></span><br/> 确认密码：<input id="id3" type="password" onblur="check3()"/><span id="spanPwd2" ></span><br/> <input type="submit" value="注册"> </form> </body></html>第二种方式： //通过调用dom中的 form对象的submit()手动提交表单
我仅仅把与前面更改的地方提上
第一个 把 form改了
// 修改前<form action="form1.html" onsubmit="return checkForm();">// 修改后<form action="form1.html" id="formid">// 修改前<input type="submit" value="注册">// 修改后<input type="submit" value="注册" onclick="mySubmit()">就下来就mySubmit方法代码
function mySubmit(){ var formNode= document.getElementById("formid"); //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发 if(boo1&&boo2&&boo3){ formNode.submit(); }; }整片代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单提交验证</title> <style type="text/css"> input { width: 150px; height: 20px } body { background-color: #00FFFF; } </style> <script type="text/javascript"> // 3个用来记录 用户输入信息是否合法的 变量 var boo1=false; var boo2=false; var boo3=false; function check1(){ //验证用户名是否合法：至少有4个连着英文字母 var reg = /[a-z]{4}/i; //拿到用户输入的value var value= document.getElementById("id1").value; var sUser = document.getElementById("spanUser"); if(reg.test(value)){//成功在后面显示绿色字体合法 sUser.innerHTML ="用户名可以使用".fontcolor("green"); boo1 = true; }else{ sUser.innerHTML ="用户名不合法".fontcolor("red"); boo1 = false; } } function check2(){ //验证密码是否合法：全为数字，长达至少6位 var reg = /\d{6,8}/; //拿到用户输入的value var value= document.getElementById("id2").value; var sUser = document.getElementById("spanPwd1"); if(reg.test(value)){//成功在后面显示绿色字体合法 sUser.innerHTML ="密码可以使用".fontcolor("green"); boo2 = true; }else{ sUser.innerHTML ="密码长度不合法".fontcolor("red"); boo2 = false; } } function check3(){ //拿到第一次输入的密码 var pwd1 = document.getElementById("id2").value; //拿到第二次密码 var pwd2 = document.getElementById("id3").value; var sUser = document.getElementById("spanPwd2"); if(pwd2==pwd1){ sUser.innerHTML ="恭喜，密码可用".fontcolor("green"); boo3 = true; }else{ sUser.innerHTML ="两次密码不一致".fontcolor("red"); boo3 = false; } } /*function checkForm(){ //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发 if(boo1&&boo2&&boo3){ return true; }else{ return false; } }*/ function mySubmit(){ var formNode= document.getElementById("formid"); //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发 if(boo1&&boo2&&boo3){ formNode.submit(); }; } </script> </head> <body> <!-- <form action="form1.html" onsubmit="return checkForm();"> --> <form action="form1.html" id="formid"> <br>用户名： <input id="id1" type="text" onblur="check1()" /><span id="spanUser"></span><br/> 密码： <input id="id2" type="password" onblur="check2()"/><span id="spanPwd1"></span><br/> 确认密码：<input id="id3" type="password" onblur="check3()"/><span id="spanPwd2" ></span><br/> <!-- <input type="submit" value="注册" > --> <input type="submit" value="注册" onclick="mySubmit()"> </form> </body></html>接下来是一个完整表单验证代码实例，供大家学习交流！！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单校验与提交的完整示例</title> <script type="text/javascript"> /* function checkUser(){ var oUserNode = document.getElementsByName("user")[0]; var val = oUserNode.value; var reg = /[a-z]{4}/i; var oUserSpan = document.getElementById("userspan"); var flag = reg.test(val); if(flag){ oUserSpan.innerHTML="用户名正确".fontcolor("green").bold(); }else{ oUserSpan.innerHTML="用户名错误".fontcolor("red").bold(); } return flag; } */ function check(name,reg,spanId,okInfo,errInfo){ var oUserNode = document.getElementsByName(name)[0]; var val = oUserNode.value; var oUserSpan = document.getElementById(spanId); var flag = reg.test(val); if(flag){ oUserSpan.innerHTML=okInfo.fontcolor("green").bold(); }else{ oUserSpan.innerHTML=errInfo.fontcolor("red").bold(); } return flag; } function checkUser(){ var reg = /[a-z]{4}/i; return check("user",reg,"userspan","用户名正确","用户名错误"); } function checkPwd(){ var reg =new RegExp("^[\\w]{6,9}$"); return check("pwd",reg,"pwdspan","密码格式正确","密码格式错误"); } function checkMail(){ var reg =/^\w+@\w+(\.\w+)+$/i; return check("mail",reg,"mailspan","邮箱格式正确","邮箱格式错误"); } function checkPwd2(){ //分别获取两个密码：pwd, pwd2 var pwd = document.getElementsByName("pwd")[0].value; var pwd2 = document.getElementsByName("pwd2")[0].value; //获取给用户显示提示信息的span var oSpanNode = document.getElementById("pwdspan2"); var flag; if(pwd==pwd2){//※JS中判断两个字符串是否相等用"=="，和Java不一样 oSpanNode.innerHTML=""; flag=true; }else{ oSpanNode.innerHTML="两次密码不一致".fontcolor("red").bold(); flag = false; } return flag; } function mySubmit(){ alert(checkUser()+","+ checkPwd() +","+ checkPwd2() +","+ checkMail() ); if(checkUser() && checkPwd() && checkPwd2() && checkMail()){ userinfo.submit(); } } </script> </head> <body> <h2>表单校验--较完整的示例</h2> <form id="userinfo"> 用户名:<input type="text" name="user" onblur="checkUser();"> <span id="userspan"></span> <br/> 密 码:<input type="text" name="pwd" onblur="checkPwd();"> <span id="pwdspan"></span> <br/> 确认密码:<input type="text" name="pwd2" onblur="checkPwd2();"> <span id="pwdspan2"></span> <br/> 邮件地址:<input type="text" name="mail" onblur="checkMail();"> <span id="mailspan"></span> <br/> <input type="button" value="注册" onclick="mySubmit();"> </form> </body></html>阅读全文
0 0
- DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例
- DHTML技术演示---注册表单的验证且控制提交--前端校验（模拟网上账号注册）
- form表单提交，前端验证
- php 表单提交 表单前端验证
- 从用户登录学习js验证+js控制表单提交 .
- DHTML技术：表单验证<form>
- Js表单提交验证
- 表单提交验证
- 表单提交验证类
- js表单提交验证
- 提交表单并验证
- form 表单验证提交
- 表单提交前验证
- 表单提交前验证
- 表单提交验证
- jquery表单提交验证
- 表单提交验证
- 表单提交前验证
- 虚幻360全景图
- 值得一看的开发资料
- java多线程学习之二——多线程的优势和风险
- java排序算法整理（二）
- Java 冒泡排序
- DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例
- CentOS6安装后问题汇总
- 下一代3d渲染技术，体素光线投射
- 平衡树之treap
- 12条鲜有人知的css事实（续集）
- google IO
- 传输线的阻抗匹配
- php mysqli 操作数据库
- 解决ios微信页面回退不刷新
