亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

輸入字段驗證有問題

輸入字段驗證有問題

蠱毒傳說 2021-06-16 17:57:20
我正在嘗試驗證輸入字段。當我嘗試在不填寫任何內容的情況下提交時,它給了我我犯的錯誤:請開始您的問題:我會永遠。因此,我正在嘗試檢查用戶在該字段中鍵入的文本是否以以下開頭:我會永遠嗎。但是,當我輸入一個(或多個)隨機字符時,它只會提交表單。我希望它檢查輸入是否以那些固定的樹詞開頭,否則不提交。{  const handleSubmitForm = e => {  const $form = e.currentTarget;  if (!$form.checkValidity()) {    e.preventDefault();    const field = $form.querySelector('.question_field');    showValidationInfo(field);    //$form.querySelector('.error').innerHTML = 'Some errors occured';  } else {    console.log('Form is valid => submit form');  }};const showValidationInfo = field => {  console.log(field);  let message;  if (field.validity.valueMissing) {    message = 'Please fill in a question starting with: Will i ever';  }  if (field.validity.typeMismatch) {    message = 'Type not right';  }  if (field.validity.rangeOverflow) {    const max = field.getAttribute('max');    message = 'Too big, max ${max}';  }  if (field.validity.rangeUnderflow) {    const min = field.getAttribute('min');    message = 'Too small, min ${min}';  }  if (field.validity.tooShort) {    const min = field.getAttribute('minlength');    message = 'Too short, minimum length is ${min}';  }  if (field.validity.tooLong) {    const max = field.getAttribute('maxlength');    message = 'Too long, maximum length is ${max}';  }  if (!field.value.toLowerCase().startsWith("will i ever")) {    message = 'Start your question with: Will i ever';  }  if (message) {    field.parentElement.querySelector('.error').textContent =    message;    field.parentElement.querySelector('.error').style.color = "red";  }};const handeInputField = e => {  const $field = e.currentTarget;  if ($field.checkValidity()) {    $field.parentElement.querySelector('.error').textContent = '';    if ($field.form.checkValidity()) {      $field.form.querySelector('.error').innerHTML = '';    }  }};const handeBlurField = e => {  const $field = e.currentTarget;  showValidationInfo($field);};
查看完整描述

3 回答

?
肥皂起泡泡

TA貢獻1829條經驗 獲得超6個贊

問題是您如何處理驗證,關鍵在這一行,if (!$form.checkValidity()) {這不會檢查您的字符串是否以Will i ever您必須在 if 之前手動執行,這里您有一個替代解決方案:


{

 const handleSubmitForm = e => {

  

  const $form = e.currentTarget;

  const field = $form.querySelector('.question_field');

  //here we validate the form manually

  const message = showValidationInfo(field);

  //if a message is found we show the error on the DOM, if is undefined we have no errors and we can submit the form

  if (message) {

    e.preventDefault();


  $form.querySelector('.error').innerHTML = message;

  $form.querySelector('.error').style.color = "red";

} else {

  console.log('Form is valid => submit form');

}

 };


const showValidationInfo = field => {

  if (field.validity.valueMissing) {

    return 'Please fill in a question starting with: Will i ever';

  }

  if (field.validity.typeMismatch) {

    return 'Type not right';

  }

  if (field.validity.rangeOverflow) {

    const max = field.getAttribute('max');

    return 'Too big, max ${max}';

  }

  if (field.validity.rangeUnderflow) {

    const min = field.getAttribute('min');

    return 'Too small, min ${min}';

  }

  if (field.validity.tooShort) {

    const min = field.getAttribute('minlength');

    return 'Too short, minimum length is ${min}';

  }

  if (field.validity.tooLong) {

    const max = field.getAttribute('maxlength');

    return 'Too long, maximum length is ${max}';

  }

  if (!field.value.toLowerCase().startsWith("will i ever")) {

    return 'Start your question with: Will i ever';

  }


  return undefined;

};


const handeInputField = e => {

const $field = e.currentTarget;

if ($field.checkValidity()) {

  $field.parentElement.querySelector('.error').textContent = '';

  if ($field.form.checkValidity()) {

    $field.form.querySelector('.error').innerHTML = '';

  }

}

};


const handeBlurField = e => {

const $field = e.currentTarget;

showValidationInfo($field);

};


const addValidationListeners = fields => {

fields.forEach($field => {

  $field.addEventListener('input', handeInputField);

  $field.addEventListener('blur', handeBlurField);

});

};


const init = () => {

const $form = document.querySelector('form');

$form.noValidate = true;

$form.addEventListener('submit', handleSubmitForm);


const fields = $form.querySelectorAll('.input');

addValidationListeners(fields);

};


init();

}

<div class="name_wrapper">

        <form autocomplete="off" class="form_question" action="answer.html">

            <label class="name question" for="name">Ask me a question</label>

            <div class="question_wrapper">

            <p class="error">Start your question with: Will i ever...</p>

                <input class="field question_field" type="text" name="question" placeholder="Will i ever..." value="" required>

            </div>

            <input id="button" class="answr-btn btn-question" type="submit" value="answer it!">

            <input autocomplete="false" name="hidden" type="text" style="display:none;">

        </form>


查看完整回答
反對 回復 2021-06-24
?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

這條線沒有意義:

const fields = $form.querySelectorAll('.input');

class="input"您的表單中沒有 HTML 元素。

你的意思是$form.querySelectorAll('input')?


查看完整回答
反對 回復 2021-06-24
?
largeQ

TA貢獻2039條經驗 獲得超8個贊

您在occured `;處取消了反引號的注釋。


查看完整回答
反對 回復 2021-06-24
  • 3 回答
  • 0 關注
  • 205 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號