欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何应用Html5和CSS3表单验证功效

来源:本站整理 作者:佚名 时间:2017-09-04 TAG: 我要投稿

客户端验证是网页客户端法式最常用的功效之一,咱们以前应用了林林总总的js库来停止表单的验证。HTML5实在早已为咱们供给了表单验证的功效。至于为啥没有风行起来估量是兼容性的成绩另有便是款式太丑恶了吧。
上面咱们未来一步一步发明一个HTML5和CSS3的表单验证,只应用HTML和CSS。
实现后的以下:

第一步:收拾验证字段和范例
起首咱们必要以下几个字段:
姓名(full name)
电话号码(phone number)
邮箱地点(email address)
网址(website)
在用户输出一些信息后,咱们必要校验用户的信息能否准确,防止差错数据和诱骗性的数据通报到服务器。
在HTML5的新尺度中,input输出框供给了多种输出范例好比:tel、email、number、range、color等,这些范例在桌面客户端中一样平常表现不是很显著,假如在挪动端键盘上面表现的会更显著。好比number在挪动端键盘会主动切换为纯数字,email键盘会主动切换带有@的键盘。
第二步:肯定表单款式
咱们还必要肯定表单终极的款式作风,一样平常这个事情来至于设计师。这里我在dribbble上面找了一个表单的款式作为此次的demo作风。

第三步:模板代码
应用尺度的HTML5声名代码
  charset="utf-8">
 HTML5 Form Validation
第四步:创立表单
创立一个根本的form表单位素,这里咱们不提交任何数据只是一个演示,以是form不会停止提交。
 action="" onsubmit="return false">
第五步:创立表单位素
表单位素一共有以下元素构成:
ul
li
label
input
span
ul和li元素用于排版布局,用于朋分表单位素和布局。label用于表单的字段提醒笔墨。input用于用户输出数据。span用于应用emoji提醒用户字段能否填写准确。
 
    for="name">FULL NAME
    type="text" id="name" name="
  name" placeholder="请输出姓名"/>
    class="icon-name">
 
form表单html代码实现代码以下:

第六步:增长款式
实现form元素的编写,紧着着完美一下它的款式,让它看起来更美一些。
body {
 display: flex;
}
form {
 padding: 0 10%;
 width: 100%;
 margin: auto;
}
ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
}
li {
 position: relative;
 margin-bottom: 20px;
}
label {
 color: #333;
 display: block;
 font-size: 12px;
}
input {
 width: 100%;
 outline: none;
 border: none;
 padding: 0.5em 0;
 font-size: 14px;
 color: black;
 position: relative;
 border-bottom: 1px solid #d4d4d4;
}
input:-moz-placeholder {
 color: #d4d4d4;
}
input::-webkit-input-placeholder {
 color: #d4d4d4;
}
li span {
 display: block;
 position: absolute;
 right: 0;
 top: 10px;
 font-size: 28px;
}
button {
 cursor: pointer;
 border: 1px solid #999;
 border-radius: 4px;
 padding: 10px 20px;
 margin-top: 10px;
 background: #fff;
}
css代码实现代码以下:

第七步:增长EMOJI提醒
在每一个form表单布局中,咱们曾经增长了一个span标签,好比name字段中咱们增长了一个标签。如今给他加之款式用于表现校验字段的状况。
li span {
 display: block;
 position: absolute;
 right: 0;
 top: 10px;
 font-size: 28px;
}
/*默许的是一个浅笑的脸色*/
li span::before {
 content: '😐';
}
/*咱们也可依据类名界说一些其他的脸色*/
.icon-name::before {
 content: '😐';
}
.icon-phone::before {
 content: '📞';
}
.icon-email::before {
 content: '📨';
}
.icon-website::before {
 content: '🌐';
}
增长emoji提醒款式以下

第八步::invalid和:valid伪类
:valid伪类会婚配满意校验规矩的表单位素,:invalid伪类会婚配不满意规矩的表单位素。
依据这两个规矩咱们能够改动满意和不满意规矩对应的emoji脸色。
/*不满意规矩增款式*/
input:focus:invalid {
 border-bottom: 1px solid red;

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载