时间:2021-07-01 10:21:17 帮助过:9人阅读
下面展现浏览器自带的验证功能也可在移动端中查看:
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部分:
以上就是javascript结合html5实现表单验证的全部代码,希望对大家的学习有所帮助。