logo标签列表

提交表单前如何验证表单输入

javascriptjqueryhtmlcssregex
3

我有一个表单，其中有两个输入框：一个是主机名，另一个是IP地址。在提交表单之前，如何验证这两个字段，并且如果它们与其模式不匹配，则显示错误。例如：输入正确的主机名。以下是模式：

Host : ^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$

Ip : ^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$

这是我的代码片段，但它无法正常工作： 

$('#hosti').focusout(function() {
    $('#hosti').filter(function() {
        var hosti = $('#hosti').val();
        var hostiback = $('#hosti');
        var hostiReg = /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/;
        if (!hostiReg.test(hosti)) {
            $('#hosti').css('boxShadow', '0px 0px 2px 1px #E25249');
        } else {
    $('#hosti').css('boxShadow', '0px 0px 0px 0px #E25249');
        }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form>
  HOST :
<input type="text"  placeholder="Host" id="hosti" pattern="/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/"/>
  
  IP ADDRESS :
  <input type="text"  placeholder="IP Address" pattern="/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/"/>

  
  <button type="submit">Submit</button>
</form>

使用 required 属性。 - A. Wolff
我想使用它们的模式验证表单，如果我使用必需属性。它只是检查字段是否为空。 - inaz
pattern正则表达式不应包含/分隔符。为了显示错误消息，input必须具有title属性。 - Wiktor Stribiżew
请查看这个JSfiddle。 - Wiktor Stribiżew
5个回答
3

不知道focusout函数是什么意思...为什么需要它呢？

pattern属性可以处理你所需的内容。但是，你已经在两个字段中使用了相同的模式。正如Wiktor所指出的那样-你不应该在模式中使用/。我还添加了required。

这个HTML应该是你需要使它工作的全部内容:

<form>
HOST :
<input type="text"  placeholder="Host" id="hosti" pattern="^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$" required/>

IP ADDRESS :
<input type="text"  placeholder="IP Address" pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$" required/>


  <button type="submit">Submit</button>
</form>

看起来 SO 的代码片段不支持表单，但你可以在 JSFiddle 上看到它。 在这里查看。
2
首先，正则表达式中的pattern不能有正则表达式定界符，需要去掉/。此外，这些模式默认已经被锚定（即包含在^(?:和)$之间），所以您不需要在模式中加上^和$。
为了在提交时显示错误消息，您需要向input节点添加title属性。
另外，您可以将CSS样式添加到要验证的元素的invalid和valid属性中。
参见下面的演示和JSFiddle: 

.to_validate:valid {
  color: black;
  border: 5px solid #dadadada; // dadada .glowing-border: https://dev59.com/M2035IYBdhLWcg3wBLRL
  border-radius: 7px;
}
.to_validate:invalid {
  color: navy;
  outline: none; // .glowing-border:focus 
  border-color: #ff1050;
  box-shadow: 0 0 10px #ff0000;//#9ecaed
}
<form>
  HOST :
<input type="text"  placeholder="Host" class="to_validate" id="hosti" pattern="(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])" title="Wrong Host"/>
  IP ADDRESS :
  <input type="text" class="to_validate"  placeholder="IP Address" pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" title="Wrong IP"/>
  <button type="submit">Submit</button>
</form>

如果您希望在整个HostName字段输入等于一个数字+.+数字+.+数字+.+数字的模式时失败匹配，则在开头添加(?!\d+(?:\.\d+){3}$)负向先行断言：

pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])"

在这里查看JSFiddle示例。

此先行匹配将匹配1个或多个数字，然后是3个序列的点和1个或多个数字，最后是字符串结尾（在这里，我们需要明确地定义字符串结尾模式，因为它不在模式的末尾）。

似乎SO不允许在沙盒代码中触发消息，请参阅外部JSFiddle以查看错误消息演示。 - Wiktor Stribiżew
当主机名字段为例如：192.168.0.100时，它几乎显示正确。但这是一个IP地址而不是主机名。你认为问题出在哪里？ - inaz
主机字段模式也匹配IP地址，您想禁止它们吗？请参见https://jsfiddle.net/0b300qo3/3/，我在开头添加了一个负向先行断言，一旦整个输入看起来像*数字* + . + 数字 + . + 数字 + . + 数字，就会失败匹配。我对主机名部分的要求有些不确定。 - Wiktor Stribiżew
我只想在主机字段中添加名称。在你的新代码片段中，当我写入主机字段：192.168.178时，它仍然有效！ - inaz
是的，这是有效的，因为它只包含3个用点分隔的数字，而IP字符串需要4个部分。所以，它不是一个IP。你的确切要求是什么？如果只有数字/点，你想匹配失败吗？那么使用(?![\d.]+$)预查。请参见此演示。 - Wiktor Stribiżew
1
1

请试着在主机输入框中输入一些值并查看

$(document).ready(function(){
  $( "input[name='host']")
   .focusout(function() {
     var pat_h  = $( "input[name='host']").attr("pattern");
     var val = $( "input[name='host']").val();
     var reg = new RegExp("^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
     if(reg.test(val)){
      alert("match")
     }
     else{
       alert("not match");
     }

   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form>
  HOST : 
  <input  type="text"  placeholder="Host" id="hosti" pattern="/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" name="host"/>
  
  IP ADDRESS :
  <input name="ip" type="text"  placeholder="IP Address" pattern="/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/"/>

  
  <button type="submit">Submit</button>
</form>

1

基本上你想要实现的是在按钮点击事件和表单提交之间的中间状态。你可以将按钮上的type="submit"属性移除，并捕获按钮点击事件，在此处验证输入并提交表单。代码示例如下：

$("#submit_button").on("click", function() {
  /* DO ALL YOUR REQUIRED INPUT VALIDATIONS AND DISPLAY ERRORS */
  $("#my_form").submit();
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接