在 <input> html 5 表单中使用多个模式进行验证答案

【问题标题】：using mutiple patterns in <input> html 5 form for validation在 <input> html 5 表单中使用多个模式进行验证
【发布时间】：2013-06-06 19:16:09
【问题描述】：

我对表单中的输入有要求...我的有效值为数字或“无最小值”或“无最大值”。现在我可以将模式用于字符串值或数字，但不能同时使用...我的问题是如何在 html 5 输入标签中使用多个模式...我也在使用 jQuery...

 <form id="form_searchProperty"  >
  <div class="criteria_block">
   <span><label class="search_form_Label" for="propbath">Bathroom</label></span>
     <span>
          <input id="input_propbath_min" value="No Min" pattern ="\d+" name="Min_Bathrooms" style="width:75px;"/>
          <input id="input_propbath_max" value="No Max" pattern ="\d+" name="Max_Bathrooms" style="width:75px;" />
      </span>
    </div>
  </form>

【问题讨论】：

您已经为此使用了 select 元素，这限制了用户可以通过下拉菜单选择的内容。在这种情况下，我看不到使用模式属性的好处。
很抱歉垫，我粘贴了错误的代码....是我使用的输入！看上面的代码谢谢
您能否改为使该字段不需要并接受空输入作为“无最小值”/“无最大值”？
no是因为No Min标签是给用户显示的，放0，很多人可能不明白...虽然No Min，一旦提交表单我就当0...跨度>

标签： jquery html forms validation

【解决方案1】：

您可以使用 OR (|) 运算符。

pattern="(No M(in|ax))|\d+"

【讨论】：

【解决方案2】：

由于你的模式是一个正则表达式，你的正则表达式模式可以有一个非此即彼：

<input pattern ="(\d+)|(No Min)">

【讨论】：

【解决方案3】：

您可以使用正则表达式测试代替输入元素的模式属性。

看到这个：

<script src="jquery-1.8.0.min.js"></script>
<script>
$(function(){

    $('form#form_searchProperty').submit(function(){
        var pat1 = /\d+|no min/i, pat2 = /\d+|no max/i;
        if (!pat1.test($('#input_propbath_min').val()) && !pat2.test($('#input_propbath_min').val()))
        {
            return false;
        }
    });

});
</script>

<form id="form_searchProperty"  >
    <div class="criteria_block">
        <span><label class="search_form_Label" for="propbath">Bathroom</label></span>
        <span>
            <input id="input_propbath_min" value="No Min" name="Min_Bathrooms" style="width:75px;"/>
            <input id="input_propbath_max" value="No Max" name="Max_Bathrooms" style="width:75px;" />
        </span>
    </div>
    <input type="submit" >
</form>

【讨论】：

【解决方案4】：

你可以使用这种格式

<input type="text" pattern="10453|10457" />

使用 | 添加任意数量的数字签名。

【讨论】：