Interactive Web Authoring大作业关键功能实现总结
引语:
最近大作业要做一个交互式网站,里面的功能涉及到了表单验证和存储表单信息并打印,用了大概一周的时间连查资料找函数算是勉强做完了,现在准备总结一下制作过程中遇见的困难
要求:
你是一个求职者,你要在网站上放上你的个人信息来供公司选择。如果公司对你有意向,则公司会填写一个联系表,当公司正确填写完表格后,会跳转到你的简历页面来获得你的简历。同时你需要记录下填写你表格的公司的名称,并将他们在页面中打印下来
效果图:
跳转页面&&存储表单信息:
这里因为页面是静态要求的,不需要传输到服务器,所以在跳转地方偷了懒,我将表单的method设为"get",将action设为目标url,用户在提交表单后直接就会跳转到action处的网页。在存储表单信息的时候,我采用了localstorage来进行本地存储,我在local里面设置了一个键值对的数组,每次读取到新的公司名称后都会将其push进这个数组进行保存,同时在过程中使用JSON.parse()和JSON.stringify()进行转换。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
</script> <form id="form1" name="form1" method="get" action="view_CV_requested.html" onsubmit="return checkform()"> <table width="777" border="0" cellpadding="1" cellspacing="1"> <tr> <td colspan="3" ><div align="center" >please fill out the form to get CV</div></td> </tr> <tr> <td width="250"><div align="right">please input your last name:</div></td> <td width="250"><div align="center" > <label> <input type="text" name="lastname" onblur=""/> </label> </div></td> </tr> <tr> <td width="250"><div align="right">please input your first name:</div></td> <td width="250"><div align="center" > <label> <input type="text" name="firstname" onblur=""/> </label> </div></td> </tr> <tr> <td width="250" ><div align="right">please input your company name<font color="red">*</font>:</div></td> <td width="250"><div align="center"> <label> <input type="text" name="username" onblur="checkusername()" /> </label> </div></td> <td><div align="center" id="errusername"></div></td> </tr> <tr> <td width="250"><div align="right">please input your phone number<font color="red">*</font>:</div></td> <td width="250"><div align="center" > <label> <input type="text" name="phone" onblur="checkphone()"/> </label> </div></td> <td><div align="center" id="errphone"></div></td> </tr> <tr> <td width="250"><div align="right" >please input your EMAIL<font color="red">*</font>:</div></td> <td width="250"><div align="center" > <label> <input type="text" name="email" onblur="checkemail()" /> </label> </div></td> <td><div align="center" id="erremail"></div></td> </tr> <tr> <td width="250"><div align="right">please input your address:</div></td> <td width="250"><div align="center" > <label> <input type="text" name="address" onblur=""/> </label> </div></td> </tr> <tr> <td><div align="right"> <label> <input type="submit" name="Submit" value="submit" /> </label> </div></td> <td><div align="center"> <label> <input type="reset" name="Submit2" value="reset" /> </label> </div></td> <td><div align="center"></div></td> </tr> </table> </form> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function jump() { var myform = document.getElementById("form1"); var username = myform.username.value; if(window.localStorage.getItem("companyList") == null){ var companyList = []; }else{ var companyList = window.localStorage.getItem("companyList"); companyList = JSON.parse(companyList) } var companyobj = { name: username }; companyList.push(companyobj); window.localStorage.setItem("companyList", JSON.stringify(companyList)); console.log(companyList); }
打印表单信息:
这里为了打印的美观,调用的JQ库里面的append()函数,具体实现还是比较简单的,只是把存储信息的数组里的数用append()全部打印出来
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(document).ready(function(){ var companyobj = window.localStorage.getItem("companyList"); companyobj = JSON.parse(companyobj) var num = 1; for(i=0;i<companyobj.length;i++){ $("ol").append("<p>"+num+'.'+companyobj[i].name+"</p>"); num++; } });
表单验证:
表单验证主要用了正则表达式对表单内的一些数进行判断,流程大概是先写一个正则表达式变量(邮箱为例),然后用test()函数进行判断是否符合
var myform = document.getElementById("form1"); var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; mail.test(myform.email.value)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function checkusername() { var myform = document.getElementById("form1"); var username = myform.username.value.length; if(username < 1) { errusername.innerHTML = "<font color='red'>please input correct company</font>"; return false; }else{ errusername.innerHTML = "<font color='green'>company is correct</font>"; return true; } } function checkphone() { var myform = document.getElementById("form1"); var phone = /[0-9-()()]{7,18}/; if(!phone.test(myform.phone.value)) { errphone.innerHTML = "<font color='red'>please input correct phone</font>"; return false; }else{ errphone.innerHTML = "<font color='green'>phone number is correct</font>"; return true; } } function checkemail() { var myform = document.getElementById("form1"); var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; if(!mail.test(myform.email.value)) { erremail.innerHTML = "<font color='red'>please input correct email</font>"; return false; }else{ erremail.innerHTML = "<font color='green'>email is correct</font>"; return true; } } function checkform() { checkusername();checkphone();checkemail(); if(checkusername()&&checkphone()&&checkemail()) { jump(); //window.location.replace("view_CV_requested.html"); return true; }else{ return false; } }
PS:
舍友用了jq库里的val()来获取值从而写表单,看了以后感觉挺厉害的,也贴上来供以后学习一下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Contact Form</title> <meta name="author" content=""> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body style="height: auto;"> <div class="page login-page jz"> <div class="container d-flex align-items-center"> <div style="float: left;margin-top: 100px;"> <img src="./img/timg.jpg" alt="" style="width: 600px;border-radius: 20px;"> </div> <div class="company_box"> <div class="inputwrap"> <h2>company information</h2> <input type="text" id="username" placeholder="Please input company name" /> <input type="text" id="usermsg" placeholder="Please input further information" /> <input type="text" id="userphone" placeholder="Please input phone number" maxlength=11 /> <input type="email" id="useremail" placeholder="Please input email adress" /> <button type="button" onclick="submitmsg()">Submit</button> </div> <p class="errormsg errormsg_index"></p> </div> </div> </div> <script src="./js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var phoneReg = /[0-9-()()]{7,18}/;//phoneReg.test($("#userphone").val()) var emailReg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; function submitmsg() { if ($("#username").val().length < 6){ $(".errormsg").text("Please input the correct name"); } else if ($("#usermsg").val().length < 6 ) { $(".errormsg").text("Please input the correct information"); } else if (!phoneReg.test($("#userphone").val()) ) { $(".errormsg").text("Please input the correct phone number"); } else if (!emailReg.test($("#useremail").val())) { $(".errormsg").text("Please input the correct email form"); } else { $(".errormsg").text(""); window.sessionStorage.setItem("describe", true) if(window.localStorage.getItem("describeList") == null){ var describeList = []; }else{ var describeList = window.localStorage.getItem("describeList"); describeList = JSON.parse(describeList) } var describeobj = { name: $("#username").val() }; describeList.push(describeobj); window.localStorage.setItem("describeList", JSON.stringify(describeList)); window.location.replace('resume.html') } } </script> </body> </html>