zhangyi
/
linux_yz_door


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WDKL NET BRIDGE</title> 
</head>
<style>
  fieldset{
    margin-top: 30px;
    border-radius: 15px;
    border: 1px solid #ccc;
  }
  label{
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 30px;
  }
  input{
    margin-top: 10px;
  }
  input[type=submit] {
    margin-left: 10%;
  width: 200px;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
</style>
<body>
  <div>
    <h1>WDKL NET BRIDGE</h1>
    <p>mac : %s</p>
  </div>

  <form action="/setting" method="POST" onsubmit="return validate();">
    <fieldset>
      <legend>DEVICE</legend>
      <label>DHCP?</label>
      YES<input onclick="ipSetting(false);" type="radio" name="dhcp" value="1" style="margin-right: 1rem;" checked>
      NO<input onclick="ipSetting(true);" type="radio" name="dhcp" value="0">
      <br>
      <div id="ip_panel" style="display: none;">
        <label>IP</label>
        <input type="text" name="ip" id="ip" value="%s">
        <br>
        <label>NETMASK</label>
        <input type="text" name="netmask" id="netmask" value="%s">
        <br>
        <label>GATEWAY</label>
        <input type="text" name="gateway" id="gateway" value="%s">
        <br>
        <label>DNS1</label>
        <input type="text" name="dns1" id="dns1" value="%s">
        <br>
        <label>DNS2</label>
        <input type="text" name="dns2" id="dns2" value="%s">
      </div>
    </fieldset>

    <fieldset>
      <legend>SERVER</legend>
      <label>SERVER IP</label>
      <input type="text" name="server_ip" id="server_ip" value="%s">
    </fieldset>
    
    <input type="submit" value="submit">
  </form>
  <script>
    function ipSetting(show){
      console.log("xxx" + show);
      document.getElementById("ip_panel").style.display = show?"block":"none";
    }
    function validate() {
      console.log(document.getElementById("ip_panel").style.display);
      var regexIP = /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9]).){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/;
      var regexNetmask = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/;

      var ip = document.getElementById("ip").value;
      var netmask = document.getElementById("netmask").value;
      var gateway = document.getElementById("gateway").value;
      var dns1 = document.getElementById("dns1").value;
      var dns2 = document.getElementById("dns2").value;
      var server_ip = document.getElementById("server_ip").value;

      if (document.getElementById("ip_panel").style.display == "none"){
        if (server_ip == ""){
          alert("server ip must input");
          document.getElementById("server_ip").focus();
          return false;
        } else if (!regexIP.test(server_ip)){
          alert("server ip wrong input");
          document.getElementById("server_ip").focus();
          return false;
        }
        return true;
      } else {
        if (ip == ""){
          alert("ip must input");
          document.getElementById("ip").focus();
          return false;
        } else if (netmask == ""){
          alert("netmask must input");
          document.getElementById("netmask").focus();
          return false;
        } else if (gateway == ""){
          alert("gateway must input");
          document.getElementById("gateway").focus();
          return false;
        } else if (server_ip == ""){
          alert("server_ip must input");
          document.getElementById("server_ip").focus();
          return false;
        }

        if (!regexIP.test(ip)){
          alert("ip wrong input");
          document.getElementById("ip").focus();
          return false;
        } else if (!regexNetmask.test(netmask)){
          alert("netmask wrong input");
          document.getElementById("netmask").focus();
          return false;
        } else if (!regexIP.test(gateway)){
          alert("gateway wrong input");
          document.getElementById("gateway").focus();
          return false;
        } else if (!regexIP.test(server_ip)){
          alert("server_ip wrong input");
          document.getElementById("server_ip").focus();
          return false;
        } else if (dns1!="" && !regexIP.test(dns1)){
          alert("dns1 wrong input");
          document.getElementById("dns1").focus();
          return false;
        } else if (dns2!="" && !regexIP.test(dns2)){
          alert("dns2 wrong input");
          document.getElementById("dns2").focus();
          return false;
        }

        return true;
      }
    }
  </script>
</body>
</html>