Question

我在一个页面上有一个保存按钮。如果单击保存按钮，它将提交页面，而在提交时将使整个身体变得不透明并加载动画。页面中需要几个输入，当我保存（提交）页面时，它会检查所需的输入并在未填写时发出警告。但是它仍然提供不透明度和加载动画（但不提交，这是好）。

现在我的问题是；如何检查所需输入是否未使用javascript函数填充，以便随后可以触发（或不触发）不透明度。

Answer 1

有多种方法，

您可以为每个输入添加默认值：<input id="inputPassword1" type="text" value="default"/>
您可以使用Bootpstrap验证器：http://1000hz.github.io/bootstrap-validator/
您还可以使用HTML默认验证： https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

我最喜欢的是玩输入值和正则表达式，您将完全控制输入。只需使用getElement（js）或选择器$（'＃input'）（jquery）获取元素，然后逐一检查即可。

Answer 2

您可以使用输入的value属性来检查表单输入是否具有值

plain javascript:
        let value = document.querySelector("input#required").value;
        if(value) {
            //do something show animation and submit the page
        }else {
            //propmt that the value is required
        }

    using jQuery:
        let value = $("input#required").val();
        if(value) {
            //do something show animation and submit the page
        }else {
            //propmt that the value is required (don't show animation or submit the form)
        }

对于复选框，您可以使用checked属性而不是value属性。这将返回一个布尔值，指示是否已检查该字段。

let value = document.querySelector("input#required").checked;

Answer 3

考虑到您提供的详细信息很少，我将假设这是您要寻找的 kidna 吗？

// Wrap it all up in some name space, prevent everything from beign global. 
const App = function(myNameSpace) {


  // A function to call when the form is in fact valid.
  const onValid = () => {
    console.log('VALID! YAY!');
  };


  // A function to call when the form is in fact invalid. 
  const onInvalid = () => {
    console.log('Booo! Invalid!');
  };


  // A function to run when the button has been clicked. 
  const buttonHandler = (e) => {
    let isValid = true,
      validInputs = [],
      invalidInputs = [];
    e.preventDefault();

    Array.prototype.slice.call(document.querySelectorAll("form input:required")).map(i =>
      i.value.replace(/\ /g, '').length > 0 && isValid == true ?
      isValid = true && validInputs.push(i) :
      isValid = false && invalidInputs.push(i)
    );

    isValid != false ? onValid(validInputs) : onInvalid(invalidInputs);
  };


  // A simple function that we wish to expose.
  myNameSpace.launch = () => {
    console.log('Lunching app...');
    document.querySelector('form input[type=submit]').onclick = buttonHandler;
  };


  // Simply return the namespace object.
  return myNameSpace;
}({});


// Start the app! 
App.launch();

<form>
  <input type="email" required/>
  <input type="password" required/>
  <input type="submit" value="Log In" />
</form>

Answer 4

请参阅本文。您将了解验证技术。

A simple jQuery form validation script

提交表单之前，有很多不同的方式来验证表单。

javavscript检查是否触发了所需的输入

4 个答案: