问题描述
一、实验目的:
1、了解JavaScript事件类型。
2、利用表单的提交及重置事件对表单的数据进行校验。
3、掌握表单事件、鼠标事件、键盘事件、窗口事件处理程序的调用方法。
二、实验内容:
1、完成以下效果的网页设计:
初始化网页如下:
2、要求如下
1)页面刷新时,用户名对应的文本框自动获得焦点,并且当用户名输入值长度小于6个字符时,提示“用户名长度太短,至少6个字符!!“。当输入长度大于等于6个字符,则立即清除提示。注意,提示信息在文本框的右边显示,并且不改变原有元素的位置。
2)当设置密码为空时,提示请设置密码。不为空则立即清除提示。
3)当确认密码与设置密码不一致时,请提示密码不一致。密码一致则立即清除提示。
4)点击提交按钮后,会校验用户名是否符合要求,确认密码与设置密码是否一致。若不一致,则不允许提交表单,且显示校验失败的提示信息和以警告框的方式显示“注册信息不符合要求,不允许提交表单!!!”。若一致,则提交表单。
解决方案:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单提交控制</title> </head> <style> .name{ padding-left: 16px; } body{ display: flex; justify-content: center; padding-left: 17%; } .button{ margin-left: 130px; } </style> <body> <div> <form id="myForm"> <div class="name"> <span>用户名:</span><input type="text" id="name" onblur="selectname()" autofocus> <span style="visibility: hidden" id="tishi1">用户名长度太短,至少6个字符!!</span><br> </div> 设置密码:<input type="text" id="pwd" onblur="selectpwd()"> <span style="visibility: hidden" id="tishi2">密码不能为空</span><br> 确认密码:<input type="text" id="pwd2" onblur="selectpwd2()"> <span style="visibility: hidden" id="tishi3">密码不一致</span><br> <input class="button" type="button" value="提交" onclick="submitinfo();"> <!-- <button type="submit">提交</button> --> </form> </div> </body> <script> function selectname() { var x = document.getElementById("name"); var y=document.getElementById('name').value.length; var z = document.getElementById("tishi1"); if(y<6){ //显示 z.style.visibility = 'visible'; }else{ //隐藏 z.style.visibility = 'hidden'; } } function selectpwd() { var x = document.getElementById("pwd"); var y=document.getElementById('pwd').value.length; var z = document.getElementById("tishi2"); if(y==0){ //显示 z.style.visibility = 'visible'; }else{ //隐藏 z.style.visibility = 'hidden'; } } function selectpwd2() { var x1 = document.getElementById("pwd2").value; var x2 = document.getElementById("pwd").value; var z = document.getElementById("tishi3"); if(x1!=x2){ //显示 z.style.visibility = 'visible' }else{ //隐藏 z.style.visibility = 'hidden'; } } function submitinfo(){ var a = document.getElementById('name').value.length; var b = document.getElementById('pwd').value.length; var c1 = document.getElementById("pwd2").value; var c2 = document.getElementById("pwd").value; if(a<6 || b==0 || c1!=c2){ alert("注册信息不符合要求,不允许提交表单!!!"); } else{ var form = document.getElementById("myForm"); form.submit(); alert("提交成功"); } } </script> </html>