JavaScript 或 jQuery 中的 HTML 表单验证逻辑

Posted 2023-05-09

【中文标题】JavaScript 或 jQuery 中的 HTML 表单验证逻辑

【英文标题】：HTML Form Validation Logic in JavaScript or jQuery

【发布时间】：2021-08-22 03:15:00

【问题描述】：

我有一个表单，我应该为其编写验证逻辑。

假设有一个这样的输入字段。

<div class="group1"><label>Product code</label> <input id="code" name=""code" type="text" class="control1"></div>

如果我想让它成为必填字段，我该如何编写逻辑？

我无权访问 CSS 文件。但是有一个像这样的输入，我可以使用它有一个红色的轮廓。

<div class="group1 row has-error">
   <div><input type="text" class="control1"></div>
</div>

我必须用 javascript 或 jQuery 提供代码。

【参考方案1】：

获取一个元素并在required 属性上设置true。

const input1 = document.getElementById('code');
input1.required = true;

const input2 = document.querySelector('div.group1>div>input.control1');
input2.required = true;

<form>
  <div class="group1"><label>Product code</label>
    <input id="code" name="code" type="text" class="control1">
  </div>
  <div class="group1 row has-error">
    <div>
      <input type="text" class="control1">
    </div>
  </div>
  <input type="submit">
</form>

【参考方案2】：

我想这就是你需要的

$("#formSubmit").submit(function(e) 
    e.preventDefault();
    var error_text = "<div class='text-danger error_val'>Cannot be empty</div>"
    var data = $("#formSubmit").serializeArray();
    var allInputs = $("#formSubmit input");
    for(var i=0; i<data.length; i++)
        if(data[i].value.length == 0)
            $(".group1").addClass('has-error');
            var errorDiv = $(allInputs)[i].closest('.has-error');
            $(error_text).insertAfter( errorDiv );
        
    
);

.has-error input
 border: 1px solid #f00; 


.text-danger
color:#f00;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formSubmit">
    <div class="group1 row">
        <label>Product code</label>
        <input id="code" name="code" type="text" class="control1" >
    </div>
    <button type="submit" id="submitButton">Save</button>
</form>

【参考方案3】：

我知道为时已晚，但您可以使用这些函数将输入设为必需/可选

function makeFieldRequired(element, elementName) 
  let jqueryObj = $(element);
  jqueryObj.attr('title', `$elementName is required`);
  jqueryObj.attr('required', 'true');

  if (jqueryObj.closest("form").length)
    refreshFormValidtion(jqueryObj.closest("form"));


function makeFieldOptional(element) 
  let jqueryObj = $(element);
  jqueryObj.removeAttr('required');
  jqueryObj.removeAttr('title');

  if (jqueryObj.closest("form").length)
    refreshFormValidtion(jqueryObj.closest("form"));


function refreshFormValidtion(form) 
  $(form).removeData("validator").removeData("unobtrusiveValidation");
  $.validator.unobtrusive.parse($(form));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>