表单保存前的的特殊校验（非空，特殊字符，指定值）

最新推荐文章于 2023-12-14 17:34:24 发布

程序员阿卢

最新推荐文章于 2023-12-14 17:34:24 发布

阅读量1.1k

点赞数

分类专栏： java Web

本文链接：https://blog.youkuaiyun.com/ljq54/article/details/85840143

版权

java Web 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了反馈页面的设计思路，包括布局、样式和交互流程。重点解析了使用HTML、CSS和JavaScript实现反馈表单的过程，涵盖表单验证、AJAX提交及反馈提示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<title>${logo.cnName}</title>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta httpEquiv="Cache-Control" content="no-siteapp" />
<meta name="renderer" content="webkit" />
<meta name="keywords" content="demo" />
<meta name="description" content="demo" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="${basePath}/resource/dist/css/_common.css">
<link rel="stylesheet" type="text/css" href="${basePath}/resource/dist/css/style.css">
<script type="text/javascript" src="${basePath}/resource/dist/js/lib/viewport/viewport.js"></script>
</head>

<body>
<div class="wraper">
    <#include "/header.html">
      <div class="ZW-main">
        <div class="wy_government_data">
          
          <div class="F_crumbs_hasicon">
            <span class="now_add">您当前所在的位置：</span>
            <div class="blue_color main_page"><i class="wy_home_icon"></i>首页</div>
            <span class="to_next">></span>
            <span class="blue_color now_add_blue">我要反馈</span>
          </div>
          <div class="government_data_content">
            
            <div class="government_data_main fn-clear">
              
              <div class="wy_navigation_left">
                <ul class="wy_navigation_left_ul">
                  <li class="choose">
                    <i class="nav_left_icon"></i>
                    <h3>我要反馈</h3>
                    <i class="nav_right_icon"></i>
                  </li>
                  <li>
                    <i class="nav_left_icon1"></i>
                    <h3>反馈列表</h3>
                    <i class="nav_right_icon"></i>
                  </li>
                </ul>
              </div>
              
              <div class="content_right" id="wy_has_feedback">
                <div class="feedback_main">
                  <div class="government_data_title">
                    我要反馈</div>
                </div>
                <div class="feedback_content">
                  <form class="feedbackform" action="" method="post" οnsubmit="return false;">
                    <table class="feedback_table">
                      <tr>
                        <td class="table_left_title">
                          <span class="must_filling">*</span>
                          <h4>标题：</h4>
                        </td>
                        <td colspan="2">
                          <input type="text" name="title" maxlength="100" class="feedback_input" placeholder="请输入标题，不能为空">
                          <span id="titleTips" style="color:red;"> </span>
                        </td>
                      </tr>
                      <tr>
                        <td class="table_left_title" style=" vertical-align:top; padding-top: 5px;">
                          <span class="must_filling">*</span>
                          <h4>建议内容：</h4>
                        </td>
                        <td colspan="2">
                          <textarea class="content" maxlength="1020" placeholder="请输入具体建议，不能为空" style="width:100%; min-height:150px"></textarea>
                          <span id="contentTips" style="color:red;"> </span>
                        </td>
                      </tr>
                      <tr>
                        <td class="table_left_title">
                          <span class="must_filling">*</span>
                          <h4>姓名：</h4>
                        </td>
                        <td colspan="2">
                          <input type="text" placeholder="请输入姓名，不能为空" maxlength="100" name="create_user" class="feedback_input">
                          <span id="userTips" style="color:red;"> </span></td>
                      </tr>
                      <tr>
                        <td class="table_left_title">
                          <span class="must_filling">*</span>
                          <h4>电子邮箱：</h4>
                        </td>
                        <td colspan="2">
                          <input type="text" placeholder="请输入正确格式的邮箱，不能为空" maxlength="100" name="email" class="feedback_input">
                          <span id="emailTips" style="color:red;"> </span>
                        </td>
                      </tr>

                    </table>
                    <div class="submission_button">
                      <span>提交申请</span>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <#include "/footer.html">
</div>
<script src="${basePath}/resource/dist/js/lib/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${basePath}/resource/dist/js/lib/pager.js"></script>
<script src="${basePath}/resource/dist/js/lib/sweetalert/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/resource/dist/css/sweetalert/sweetalert.css">
<script>
    $(function () {
      $("#codeName").attr("src", "/code/check" + "?" + Math.random());
    })
    function getVerify(obj) {
      obj.src = "/code/check" + "?" + Math.random();
    }
    $(function () {
      $('.wy_navigation_left_ul li').on('click', function () {
        $(this).addClass('choose');
        $(this).siblings('li').removeClass('choose');
        var leftNavName = $(this).find('h3').text();
        $('.now_add_text').text(leftNavName);
        switch (leftNavName) {
          case '反馈我要':
            $('#wy_feedback').show();
            $('#wy_has_feedback').hide();
            break;
          case '反馈列表':
            $('#wy_has_feedback').show();
            $('#wy_feedback').hide();
            window.location.href = "/open_portal/feedbackReceived";
            break;
          case '最新调查问卷':
            $('#wy_questionnaire').show();
            $('#wy_has_questionnaire').hide();

            break;
          case '已有调查问卷':
            $('#wy_has_questionnaire').show();
            $('#wy_questionnaire').hide();
            break;
        }
      });
    })
</script>
<script>
//过滤特殊字符串
function validateSpecificKey(str) {
var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
for (var i = 0; i < str.length; i++) {
    if (specialKey.indexOf(str.substr(i, 1)) != -1)
    {
      return false;
    }
}
return true;
}
    var ok1 = false;
    var ok2 = false;
    var ok3 = false;
    var ok4 = false;
    var title = $("input[name='title']");
    var content = $(".content");
    var create_user = $("input[name='create_user']");
    var email = $("input[name='email']");
    // 验证标题
    $(title).blur(function () {
      if (title.val().length > 0) {
          if(validateSpecificKey(title.val())){
          ok1 = true;
          $("#titleTips").text("");
          }else{
          ok1 = false;
          $("#titleTips").text("不能输入特殊字符");
          }
      } else {
         $("#titleTips").text("请输入标题");

      }
    });
    // 建议内容
    $(content).blur(function () {
      if (content.val().length > 0) {
        if(validateSpecificKey(content.val())){
          ok2 = true;
          $("#contentTips").text("");
          }else{
          ok2 = false;
          $("#contentTips").text("不能输入特殊字符");
          }
      } else {
        $("#contentTips").text("请输入建议内容");

      }
    });
    // 验证用户名
    $(create_user).blur(function () {
      if (create_user.val().length > 0) {
         if(validateSpecificKey(create_user.val())){
          ok3 = true;
          $("#userTips").text("");
          }else{
          ok3 = false;
          $("#userTips").text("不能输入特殊字符");
          }
      } else {
         $("#userTips").text("请输入姓名");
      }
    });
    //验证邮箱
    $(email).blur(function () {
      if (email.val().length > 0) {
        if (email.val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/) == -1) {
           $("#emailTips").text("请输入有效的EMAIL格式");
        } else {
          if(validateSpecificKey(email.val())){
          ok4 = true;
          $("#emailTips").text("");
          }else{
          ok4 = false;
          $("#emailTips").text("不能输入特殊字符");
          }
        }
      } else {
         $("#emailTips").text("请输入邮箱");

      }
    });
    //提交按钮,所有验证通过方可提交
    $(".submission_button span").click(function () {

      if (ok1 & ok2 & ok3 & ok4) {
        $(".feedbackform").serialize();
        $.ajax({
          type: 'post',
          url: '/interaction/saveFeedBack',
          data: {
            title: title.val(),
            content: content.val(),
            create_user: create_user.val(),
            email: email.val()
          },
          dataType: "json",
          success: function (data) {
            window.location.href = "/open_portal/feedback";
          }
        });
      } else {

            // 验证标题

      if (title.val().length <1) {

         $("#titleTips").text("请输入标题");

      }else{
       if(validateSpecificKey(title.val())){
          $("#titleTips").text("");
          }else{
          $("#titleTips").text("不能输入特殊字符");
          }
      }

    // 建议内容

      if (content.val().length <1) {

        $("#contentTips").text("请输入建议内容");

      }
      else{
       if(validateSpecificKey(content.val())){
          $("#contentTips").text("");
          }else{
          $("#contentTips").text("不能输入特殊字符");
          }
      }

    // 验证用户名

      if (create_user.val().length <1) {

        $("#userTips").text("请输入姓名");

      }else{
       if(validateSpecificKey(create_user.val())){
          $("#userTips").text("");
          }else{
          $("#userTips").text("不能输入特殊字符");
          }
      }

//验证邮箱

      if (email.val().length > 0) {
           if (email.val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/) == -1) {
              $("#emailTips").text("请输入正确的EMAIL格式");

           }
           else{
           if(validateSpecificKey(email.val())){
          $("#emailTips").text("");
          }else{
          $("#emailTips").text("不能输入特殊字符");
          }
          }
      }
   else {
       $("#emailTips").text("请输入邮箱");
   }

        return false;
      }
    });