Question

我有一个带有两个输入的表单：一个用于主机名，另一个用于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])$

这是我的代码段，但它不起作用：

＆＃13;

$('#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');
        }
    })
});

＆＃13;

<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>

＆＃13;

Answer 1

Dunno 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的片段不支持表单，但您可以看到它here at JSFiddle。

Answer 2

首先，pattern regexp不能包含正则表达式分隔符，必须删除/。此外，默认情况下会锚定这些模式（即包含在^(?:和)$内），^和$在您拥有的模式中不是必需的。

要在提交时显示错误消息，您需要将title属性添加到input个节点。

此外，您可以将CSS样式添加到要验证的元素的invalid和valid属性中。

请参阅下面的演示和JSFiddle：

.to_validate:valid {
  color: black;
  border: 5px solid #dadadada; // dadada .glowing-border: http://stackoverflow.com/questions/5670879/css-html-create-a-glowing-border-around-an-input-field
  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 here。

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

Answer 3

基本上，您尝试实现的是按钮点击事件和表单提交之间的中间状态。您可以做的是从按钮中删除type="submit"属性并捕获按钮单击事件，您可以在其中验证输入，然后提交表单。像这样：

$("#submit_button").on("click", function() {
  /* DO ALL YOUR REQUIRED INPUT VALIDATIONS AND DISPLAY ERRORS */
  $("#my_form").submit();
}

Answer 4

您可以使用验证引擎插件（https://github.com/posabsolute/jQuery-Validation-Engine）并放入模式

或者只是使用输入掩码让用户清晰地了解您的模式（https://github.com/RobinHerbots/Inputmask）

最后安全性较低，但无论如何后端验证都是不可避免的

Answer 5

检查一下，尝试在主机输入中输入一些值，然后看

＆＃13;

$(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");
     }

   });
 });

＆＃13;

<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>

＆＃13;

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

5 个答案: