Question

我在我的网站上使用输入所需的属性来进行前端验证表单提交。我也在后端进行验证。

似乎Safari和IE并不完全支持＆＃34; required＆＃34;属性..

所以我在考虑编写一个快速，通用的jQuery函数，以便在浏览器不支持时进行一些验证，有些想法是这样的：

$('form').on('submit',function(){

    $(this).children().each(function(){

        if ($(this).prop('required') && $(this).val() === ""){
            alert('field has no value');
            return false;
        }
    });

});

我刚输入了示例代码，因此可能会出现一些错误。

另外，我是否真的建议我在前端字段上进行一些javascript / jquery验证？或者只是“需要”＆＃39;属性会照顾它。

Answer 1

在HTML5中，必需的标记将验证浏览器中的字段，而不需要任何Javascript，jQuery或PHP代码。

您可以在此处找到根据类型验证的方式列表：MDN

当涉及到后备时，使用某种jQuery功能会很好但只应在需要它的浏览器上调用，否则你可能会与允许它的浏览器发生冲突。

使用HTML if tag以确定是否包含该文件将是最好的。

<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->

要完成验证，您需要对表单提交进行检查，阻止默认功能，然后针对您需要的元素进行查找。

这些方面的东西：

$('form').submit(function(e) {
  e.preventDefault();
  $(':input[required]:visible').each(function() {
    if ($(this).val() == '') {
      $('span.form_error').text('A required field was not filled out');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="small_text" required />
  <input type="submit" value="submit" />
  <span class="form_error"></span>
</form>

希望这一切都对你有意义。

Answer 2

由于此属性isn't fully supported across all browsers，并且您已经说过很乐意使用JQuery进行验证，我建议使用jquery validator plugin，它将根据属性或类验证您的表单输入字段的名称。

<form>
<label for='name'>Name</label>  
<input id='name' class='required'>
<input type='submit' value='Submit'>
</form>

<script>
$('document').ready(function() {
  $('form').validate();
})
</script>

    
$('document').ready(function() {
  $('form').validate();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>

<form>
    <label for='name'>Name</label>  
    <input id='name' class='required'>
    <input type='submit' value='validate'>
</form>

仅使用javascript验证带有必需属性的字段？

2 个答案: