Question

我创建此表单是为了获取广告系列名称，开始/结束日期以及要选择的单选按钮。

<form:form id="submitCreateCampaignForm" action="createCampaign02" method="post" commandName="campaignModel">
    <table border="0">
        <tr>
            <td style="width: 140px;" >Campaign Name:</td>
            <td style="width: 300px;" colspan="4"><form:input path="campaignName" style="width:84%" /></td>
        </tr>
        <tr>
            <td>Campaign Duration:</td>
            <td colspan="1"><form:input type="text" path="fromDate" class="date-picker" /></td>
            <td colspan="1"><form:input type="text" path="toDate" class="date-picker" /></td>
            <td style="width: 250px"></td>
            <td style="width:250px"></td>
         </tr>
         <tr>
             <td>Campaign Type:</td>
             <td colspan="2"><form:radiobuttons path="campaignType" items="${campaignTypeList}" /></td>
             <td>
                 <button class="yellowButton"id="submitCreateCampaignButton">NEXT: CHARACTERISTICS</button>
             </td>
        </tr>
    </table>
</form:form>

我想确保插入名称（不进行任何长度检查），以dd/mm/yyyy格式正确选择日期，并选择其中一个单选按钮。如果存在任何错误，我希望它的框边框为红色。

我想在用户点击提交按钮后查看这些内容。

$(document).ready(function() {
    $("#submitCreateCampaignButton").click( function(){
        $( "#submitCreateCampaignForm" ).submit();
    });
});

为了检查上面提到的所有要求，我尝试了不同类型的验证器，但还没有成功。

有人能建议一个好的解决方案吗？

Answer 1

您可以使用jQuery，使用输入[name = campaignName]

等选择器来访问各种输入

见下面的例子和小提琴。

$(document).ready(function() {
  $("#submitCreateCampaignForm").submit(function(e) {

    var $form = $(this);
    var errors = 0;

    var campaignName=$form.find("input[name=campaignName]").val()

    if (!errors && campaignName == "") {
      alert("nono, campaignType empty");
      errors++;
    }

    var fromDate=$form.find("input[name=fromDate]").val()

    if (!errors && fromDate == "" ) {
      alert("nono, fromDate empty");
      errors++;
    }
    if (!errors && !isValidDate(fromDate)) {
      alert("nono, fromDate "+fromDate+" not a valid date");
      errors++;
    }

    // ...

    if (errors) e.preventDefault();
  });
});

// http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript/14794066#14794066

function isInt(value) {
  if (isNaN(value)) return false;
  var f=parseFloat(value);
  return f==(f|0);
}

// http://stackoverflow.com/questions/276479/javascript-how-to-validate-dates-in-format-mm-dd-yyyy

function isValidDate(date) {
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];

    if(y>2100 || y<1900) return false; // accept only recent & not too far years

    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

https://jsfiddle.net/ukfw3xo9/15/

这只测试两个非空的字段，一个有效的日期，但你可以用简单的js测试你想要的任何东西

测试前面的!errors &&只是警告第一个错误，而不是一次显示所有错误（意味着“如果你还没有报告错误并且......”）。 / p>

<强>更新

设置红色字段：

https://jsfiddle.net/ukfw3xo9/16/

CSS：

.red {background-color:red;}

或（仅限边框）

.red {border:1px solid red;}

JAVASCRIPT：

$(document).ready(function() {
  $("#submitCreateCampaignForm").submit(function(e) {

    var $form = $(this);
    var errors = 0;

        $form.find("input").removeClass("red");
    var campaignName=$form.find("input[name=campaignName]").val()

    if (!errors && campaignName == "") {
      $form.find("input[name=campaignName]").addClass("red");
      errors++;
    }

    var fromDate=$form.find("input[name=fromDate]").val()

    if (!errors && fromDate == "" ) {
      $form.find("input[name=fromDate]").addClass("red");
      errors++;
    }
    if (!errors && !isValidDate(fromDate)) {
      $form.find("input[name=fromDate]").addClass("red");
      errors++;
    }

    // ...

    if (errors) e.preventDefault();
  });
});

// http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript/14794066#14794066

function isInt(value) {
  if (isNaN(value)) return false;
  var f=parseFloat(value);
  return f==(f|0);
}

// http://stackoverflow.com/questions/276479/javascript-how-to-validate-dates-in-format-mm-dd-yyyy
function isValidDate(date) {
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];

    if(y>2100 || y<1900) return false; // accept only recent & not too far years

    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

您现在可以删除所有“！errors＆amp;＆amp;”（所有单元格将变为红色而不仅仅是第一个单元格。）

这段代码有点难看，只是为了展示这个概念，更简洁的方法是只输入一次输入：

var $fromDateInput=$form.find("input[name=fromDate]");
var fromDateValue=$fromDateInput.val();

if (fromDateValue == "" ) {
    $fromDateInput.addClass("red");
    errors++;
}

Answer 2

您可以设置名为“required”的标记，并设置字段的类型，例如当字段为电子邮件时键入“email”。如果类型为“文本”，则浏览器将仅检查输入是否已填充。

为什么要将输入名称设置为'form：input'，而不仅仅是'input'？

带有所需标签的输入示例

<form>
    <input type='text' name='test' required />
    <input type='email' name='email' required /> <!-- will check if is an email -->
    <input type='number' name='telephone' required /> <!-- will check if is an number -->
    <input type='submit'/>
</form>

阅读有关html5字段的更多信息，并且仅在某些情况下需要jquery验证。

请记住，由于前面存在某种类型的黑客攻击，您需要在服务器上重新验证。

jQuery验证表单，突出显示无效输入

2 个答案: