这是一个登录模块，采用原生表单的形式提交，当然你也可以把表单默认行为取消，采用异步的ajax提交。采用的都是纯原生的形式，html采用的第五代超文本标记语言即：H5;样式采用CSS3;js部分基本都采用的是ES5,没有使用JQuery，全篇只有一处采用ES6语法（let）：for>事件,解决ES5需要借助闭包才能实现的效果。
1：参数： 表单中的input 元素身上的name值对应后台接口中的入参，不加name属性，那么这个用户输入的值是没办法提交给后台的。 2：接口地址： 接口地址写在from标签的action属性上。这里给的接口地址后边拼接 一些参数，那么我们把问好后接的这些参数拿下来放在请求体一起随着用户输入的值丢个后台。这里我们写死input隐藏即可。你不必关心这些参数是干嘛的，这些是后台要的，比如：env:1,代表测试环境。 3：网络请求动作（方式）： 这里采用post方式。所以入参是放在请求体里丢给后台的
1、必填性：可以利用原生的表单元素的自身属性，required ;当采用表单原生的提交（非Ajax 异步请求（js方式提交））方式时，可以调起内部的校验，不合法会有弹窗提示："请填写此字段"。这个是HTML5中新增的。
form(action method)>input[*]+input[submit]
每一个都是必要的，最外层必须由form 标签包裹，内部必须由类型是submit的输入框。
核心代码：
oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');"
完整代码：
<input type="text" id="username" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');" >
$("input:submit").click(function(e){
e = e||window.event;
e.preventDefault(); //阻止默认行为
})
或是：
form表单.onsubmit = function () {
return false
}
验证是否生效：
填写好合法的字段，点击提交，浏览器的刷新按钮不动（表单提交时同步行为，肯定会刷新页面），说明ok了，或是给action一个提交的后台地址，这里可以给百度的试试，点击提交，不跳转百度，说明ok。
对于这个H5的新功能，貌似只能修改文字。不同浏览器的渲染样式是不一样的（浏览器程序中定制了提示框的API）
）。
html:
<input type="text" name="name" required>
css:
/* 无效 */
input:required:invalid{
CSS代码
}
/* 有效 */
input:required:valid{
CSS代码
}
input::placeholder {
color: #DDDDDD;
font-size: 16px;
letter-spacing: 1px;
}
/*placeholder兼容处理*/
input::-webkit-input-placeholder {
color: #DDDDDD;
font-size: 16px;
letter-spacing: 1px;
}
input:-ms-input-placeholder {
color: #DDDDDD;
font-size: 16px;
letter-spacing: 1px;
}
submit和button提交表单的区别 input 的type 类型分别为submit和button时候放在form标签里的区别：
-
单纯的一个按钮。没有默认行为，不写js脚本的话，按下去什么反应也没有。
-
有默认行为，点击会提交 form，除非写了js阻止它。(
) -
标签，这个按钮放在 form 中也会点击自动提交，比前两个的优点是样式好定制些。缺点可能有浏览器兼容问题。