validity.rangeUnderflow不起作用

时间:2018-06-14 10:09:18

标签: javascript validation ecmascript-6

我正在创建一个小型文本Web应用程序,您可以在其中向不同的联系人发送消息。

如果您发送邮件,我希望它至少包含3个字符。

我现在遇到的问题是,如果我填写1或2个字符,我就不会得到"太短"错误信息。我做错了什么,但我无法弄清楚是什么。



const handeSubmitForm = e => {
      const $form  = e.target;
      if(!$form.checkValidity()){
        e.preventDefault();
        $form.querySelector(`.error`).textContent = `Fill in the correct fields`;
        Array.from($form.elements).forEach(showValidationInfo);
      }
    };

    const handleInputField = e => {
      const $field = e.currentTarget;
      if($field.checkValidity()){
        $field.parentElement.querySelector(`.error`).textContent = ``;
      }
    };

    const showValidationInfo = $field => {
      let message;

      if($field.validity.valueMissing ){
        message = `Required`;
      }

      if($field.validity.rangeUnderflow){
        message = `Too short`;
      }

      if(message){
        $field.parentElement.querySelector(`.error`).textContent = message;
      }
    };

    const handleBlurField = e => {
      const $field = e.currentTarget;
      showValidationInfo($field);
    };

    const addValidationListeners = fields => {
      fields.forEach($field => {
        $field.addEventListener(`blur`, handleBlurField);
        $field.addEventListener(`input`, handleInputField);
      });
    };

  const init = () => {

    const $form = document.querySelector(`.message-form`);
    $form.noValidate = true;
    $form.addEventListener(`submit`, handeSubmitForm );
    addValidationListeners(Array.from($form.elements));

  };
  init();

<form class="message-form">
 <span class="error"></span>
  <div class="wrap">
   <span class="error"></span>
   <input type="text" class="message-input" required minlength="3" 
   placeholder="Write your message..." />
  <button type="submit" class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
  </div>
</form>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

验证#include<bits/stdc++.h> using namespace std; int main() { long long int t; cin>>t; while(t--) { long long int n; cin>>n; string s; cin>>s; long long int d=stoi(s,nullptr,2); long long int f=__builtin_popcount(d); cout<<f*(f-1)/2+f<<endl; }`enter code here` } 比较值而不是长度。使用validity.rangeUnderflow

&#13;
&#13;
validation.tooShort
&#13;
const handeSubmitForm = e => {
      const $form  = e.target;
      if(!$form.checkValidity()){
        e.preventDefault();
        $form.querySelector(`.error`).textContent = `Fill in the correct fields`;
        Array.from($form.elements).forEach(showValidationInfo);
      }
    };

    const handleInputField = e => {
      const $field = e.currentTarget;
      if($field.checkValidity()){
        $field.parentElement.querySelector(`.error`).textContent = ``;
      }
    };

    const showValidationInfo = $field => {
      let message;

      if($field.validity.valueMissing ){
        message = `Required`;
      }

      if($field.validity.tooShort){
        message = `Too short`;
      }

      if(message){
        $field.parentElement.querySelector(`.error`).textContent = message;
      }
    };

    const handleBlurField = e => {
      const $field = e.currentTarget;
      showValidationInfo($field);
    };

    const addValidationListeners = fields => {
      fields.forEach($field => {
        $field.addEventListener(`blur`, handleBlurField);
        $field.addEventListener(`input`, handleInputField);
      });
    };

  const init = () => {

    const $form = document.querySelector(`.message-form`);
    $form.noValidate = true;
    $form.addEventListener(`submit`, handeSubmitForm );
    addValidationListeners(Array.from($form.elements));

  };
  init();
&#13;
&#13;
&#13;