markdown HTML.CSS.JS.FetchingDataServerSide.Password验证

Posted 2021-05-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown HTML.CSS.JS.FetchingDataServerSide.Password验证相关的知识，希望对你有一定的参考价值。

.myForm input:invalid { 
  background-color: lightPink;
}
.myForm input:valid { 
  background-color:lightGreen; 
}
 .myForm input:required {
   border: 2px solid red;
}
 .myForm input:optional {
   border: 2px solid green;
}
.myForm label { 
  display: inline-block; 
  width: 140px; 
  text-align: right; 
}

 function checkPasswords() {
    var password1 = document.querySelector('#password1');
    var password2 = document.querySelector('#password2');
   
    // Use HTML5 form validation API
    if (password1.value !== password2.value) {
       // password2 input field is invalid
       password2.setCustomValidity('Passwords are different');
    } else {
      // call to setCustomValidity with an empty arguments
      // indicates that the input field is valid
       password2.setCustomValidity('');
    }
}

function submitForm() {
  document.body.append("We can submit, the form is valid!");
  
  // Here, for example, we can do what we want with the data
  // Send to a server using Ajax,
  // show the data in a table,
  // save data client-side, etc.
  
  // returning false will not submit the form
  return false;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of using the validation API</title>
     <meta charset="utf-8">
  </head>
  <body>
<form class="myForm" onsubmit="return submitForm();">
  <fieldset>
    <legend>Example use of the validation API: try to submit with different passwords, and with same passwords</legend>
 <label for="password1" >Password:</label> <input type="password" id="password1" oninput="checkPasswords()" required>
 <p>
 <label for="password2">Repeat password:</label> <input type="password" id="password2" oninput="checkPasswords()" required>
 <p>
   <button>Submit</button>
  </fieldset>
</form>
</body>
</html>

HTML.CSS.JS.FetchingDataServerSide.Password validation
------------------------------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/mGNajW) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/mGNajW/license).

以上是关于markdown HTML.CSS.JS.FetchingDataServerSide.Password验证的主要内容，如果未能解决你的问题，请参考以下文章

转换rst到markdown总结

markdown [Markdown HowTo]作为Markdown语法的秘籍