Javascript实现表单的验证与提交

ゝ一纸荒年。 2021-10-23 12:26 397阅读 0赞

## Javascript实现表单的验证与提交 ##

![实现以上图片中简单的向后台提交留言信息][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjk1NjQy_size_16_color_FFFFFF_t_70]

// Html部分
      <div class="after-sales-body">
            <div class="about-section">
                <div class="about-title">
                    <h2 class="cn">在线留言</h2>
                    <h2 class="en">ONLINE MESSAGE</h2>
                </div>
                <div class="contact-body clear">
                    <div class="map">
                        <img src="{wmj.Domain/}/skin/image/other/5.jpg" />
                    </div>
                    <div class="text-right">
                        <p><span>姓名：</span><input class="txtinput" name="name" id="msg_name" /></p>
                        <p><span>电话：</span><input class="txtinput" name="phone" id="msg_phone"/></p>
                        <p><span>邮箱：</span><input class="txtinput" name="email" id="msg_email"/></p>
                        <p><span>留言：</span><textarea class="submitbtn" id="msg_message"></textarea></p>
                        <div class="submit">
                            <button class="submitbtn" id="btnmessage">提交留言</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

// javascript部分
      <script>//手机正则
          var Validate = { 
              isMobile: function (value) { 
                  var validateReg = /^((\+?86)|($\+86$))?1\d{10}$/;
                  return validateReg.test(value);
              }
          }
          var Validates = { 
              isEmail: function (value) { 
                  var validateRegs = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                  return validateRegs.test(value);
              }
          }
          $(function () { 
    
              //留言验证
              $(".text-right .txtinput").focus(function () { 
                  var thisVal = $(this).val();
                  if (thisVal == "" || thisVal == "您的姓名" || thisVal == "您的电话") { 
                      $(this).val("");
                  }
              })
              $(".text-right .txtinput").blur(function () { 
                  var thisVal = $(this).val();
                  if (thisVal == "") { 
                      $(this).val(this.defaultValue);
                  }
              })
              $(".text-right textarea").focus(function () { 
                  var thisVal = $(this).val();
                  if (thisVal == "" || thisVal == "说点什么吧...") { 
                      $(this).val("");
                  }
              })
              $(".text-right textarea").blur(function () { 
                  var thisVal = $(this).val();
                  if (thisVal == "") { 
                      $(this).val(this.defaultValue);
                  }
              })
    
              $("#btnmessage").click(function () { 
                  var name = $("#msg_name").val();
                  var names = document.getElementById("msg_name");
                  var email = $("#msg_email").val();
                  var phone = $("#msg_phone").val();
                  var message = $("#msg_message").val();
    
                  if (name == "" || name == "您的姓名") { 
                      alert("请输入您的姓名！");
                      $("#msg_name").focus();
                      return false;
                  } else if (name.length > 20) { 
                      alert("姓名须在20个字符以内！");
                      $("#msg_name").focus();
                      return false;
                  } else if (phone == "" || phone == "您的电话") { 
                      alert("请留下您的手机号码！");
                      $("#msg_phone").focus();
                      return false;
                  } else if (!Validate.isMobile(phone)) { 
                      alert("请输入正确的手机号码！");
                      $("#msg_phone").focus();
                      return false;
                  } else if (!Validates.isEmail(email)) { 
                      alert("请输入正确的邮箱！");
                      $("#msg_email").focus();
                      return false;
    
                  } else if (message == "" || message == "说点什么吧...") { 
                      alert("请输入留言信息！");
                      $("#msg_message").focus();
                      return false;
                  }
                  //使用ajax向后台提交表单
                  $.ajax({ 
                      type: "post",
                      url: "Http://" + window.location.host + "/Handler/Handler.ashx/ProcessRequest?r=" + Math.random(),
                      contentType: "application/x-www-form-urlencoded; charset=utf-8",
                      dataType: "text",
                      data: {  "Action": "SubmitMessage", "name": name, "telphone": phone, "email": email, "content": message },
                      async: false,
                      success: function (results) { 
                          if (results == "success") { 
                              alert("添加成功！请等待工作人员联系！");
                              window.location.reload();
                          } else { 
                              alert("添加联系失败！");
                          }
                      }
                  });
              });
          })
      </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjk1NjQy_size_16_color_FFFFFF_t_70]: /images/20211023/a8cf69a0755f405b9e9debe58660a73a.png