表单验证--12306注册账号页面

需求：

1. 创建表单；
2. 点击下一步按钮会变色；
3. 当文本框失去焦点时，如果文本框中没有填入内容，会有相对应的提示内容，并且文本框的边框颜色变为红色；
4. 当输入内容符合要求时右边会显示绿色的√；
5. 当用户名和密码长度不够时会有错误提示，当确认密码与登录密码不匹配时也会有对应的提示；

首先搭建框架，
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>&nbsp;
                    </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>&nbsp;
                    </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>&nbsp;
                    </div>
                    <div class="error-word">
                        <span class="error-img"></span>登录密码与确认密码不同
                    </div>