Interactive Web Authoring大作业关键功能实现总结

引语:

最近大作业要做一个交互式网站，里面的功能涉及到了表单验证和存储表单信息并打印，用了大概一周的时间连查资料找函数算是勉强做完了，现在准备总结一下制作过程中遇见的困难

要求:

你是一个求职者，你要在网站上放上你的个人信息来供公司选择。如果公司对你有意向，则公司会填写一个联系表，当公司正确填写完表格后，会跳转到你的简历页面来获得你的简历。同时你需要记录下填写你表格的公司的名称，并将他们在页面中打印下来

效果图:

跳转页面&&存储表单信息:

这里因为页面是静态要求的，不需要传输到服务器，所以在跳转地方偷了懒，我将表单的method设为"get"，将action设为目标url，用户在提交表单后直接就会跳转到action处的网页。在存储表单信息的时候，我采用了localstorage来进行本地存储，我在local里面设置了一个键值对的数组，每次读取到新的公司名称后都会将其push进这个数组进行保存，同时在过程中使用JSON.parse()和JSON.stringify()进行转换。

</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>

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()全部打印出来

$(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)

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()来获取值从而写表单，看了以后感觉挺厉害的，也贴上来供以后学习一下

<!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>