JAvascript html 5フォーム検証の実装

1913 ワード

フォーム検証は、エンドユーザーが無効なデータを検出し、これらのエラーをマークするためのユーザー体験の最適化です.
以下に、ブラウザに搭載されている認証機能をモバイル端末で確認することもできます.
HTMLセクション:




  
  
  html5     


名前
空にできません
メールボックス
メールボックスのフォーマットが正しくありません

選択してください
四川省
重慶
CSS部分:

   fieldset{border: 0;}
  .myform .form-control{
    display: block;
    padding: 5px;
    width: 100%
  }
  .myform input:focus:invalid + .form-error{
    display: inline;
  }
  .myform .form-error{
    display: none;
    position: absolute; 
    margin-top: .7em;
    padding: 1px 2px;
    color: #fff;
    font-size: .875rem;
    background: #f40;
  }
  .myform .form-error:after{
    position: absolute;
    content: "";
    top: -.5em;
    left: .5em;
    z-index: 100;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-bottom: .5em solid #f40;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
    border-top: 0 dotted;
    transform: rotate(360deg);
    overflow: hidden;
  }
  .btn{
    padding: 5px 20px;
   }

JavaScriptセクション:

  function checkForm(){
    var myform = document.getElementById("formValid");
    return check(myform.elements);
  }
  function check(eles){
    var ele;
    for(var i = 0;i 
 

以上javascriptがhtml 5と組み合わせてフォーム検証を実現するすべてのコードであり、皆さんの学習に役立つことを願っています.