JAvascript html 5フォーム検証の実装
1913 ワード
フォーム検証は、エンドユーザーが無効なデータを検出し、これらのエラーをマークするためのユーザー体験の最適化です.
以下に、ブラウザに搭載されている認証機能をモバイル端末で確認することもできます.
HTMLセクション:
空にできません
メールボックス
メールボックスのフォーマットが正しくありません
省
選択してください
四川省
重慶
CSS部分:
JavaScriptセクション:
以上javascriptがhtml 5と組み合わせてフォーム検証を実現するすべてのコードであり、皆さんの学習に役立つことを願っています.
以下に、ブラウザに搭載されている認証機能をモバイル端末で確認することもできます.
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と組み合わせてフォーム検証を実現するすべてのコードであり、皆さんの学習に役立つことを願っています.