需求:
- 创建表单;
- 点击下一步按钮会变色;
- 当文本框失去焦点时,如果文本框中没有填入内容,会有相对应的提示内容,并且文本框的边框颜色变为红色;
- 当输入内容符合要求时右边会显示绿色的√;
- 当用户名和密码长度不够时会有错误提示,当确认密码与登录密码不匹配时也会有对应的提示;
首先搭建框架,
HTML部分:
<div class="box">
<!-- 导航栏 -->
<div class="nav">
<span>账号信息</span>
</div>
<!-- 表单 -->
<div class="wrapper">
<ul>
<!-- 用户名 -->
<li>
<div class="label">
<span>*</span>用户名:
</div>
<div class="input">
<input type="text" placeholder="用户名设置成功后不可修改" id="uname">
</div>
<div class="tips">6-30位字母、数字或"_",字母开头</div>
</li>
<li id="error-uname">
<div class="label">
<span></span>
</div>
<div class="error-word">
<span class="error-img"></span>用户名不能为空
</div>
</li>
<!-- 密码 -->
<li>
<div class="label">
<span>*</span>登录密码:
</div>
<div class="input">
<input type="password" placeholder="6-20位字母、数字或符号" id="pwd">
</div>
</li>
<li id="error-pwd">
<div class="label">
<span></span>
</div>
<div class="error-word">
<span class="error-img"></span>登录密码需6-20位
</div>
</li>
<!-- 确认密码 -->
<li>
<div class="label">
<span>*</span>确认密码:
</div>
<div class="input">
<input type="password" placeholder="再次输入您的密码" id="repwd">
</div>
<div class="yes">
<span class="yes-img" id="yes-img"></span>
</div>
</li>
<li id="error-repwd">
<div class="label">
<span></span>
</div>
<div class="error-word">
<span class="error-img"></span>登录密码与确认密码不同
</div>