40.项目 1-博客前端：封装库--注册验证[9]

学习要点：

1.问题所在
2.设置代码

注册验证功能，顾名思义就是验证表单中每个字段的合法性，如果全部合法才可以提交
表单。

一．问题所在

QQ截图20190517094515.png

二．设置代码

HTML 代码
<dd style="display:block" class="ps">还可以输入<strong class="num">200</strong>
字</dd>
<dd style="display:none" class="ps">已超过<strong class="num"></strong>字，
<span class="clear">清尾</span></dd>

CSS 代码

#reg dl dd.ps {
padding:0 0 0 300px;
}
#reg dl dd.ps strong.num {
padding:0 2px;
}
#reg dl dd.ps span.clear {
color:#06f;
cursor:pointer;
}

JS 代码

//备注
$('form').form('ps').bind('keyup', check_ps);
//清尾
$('#reg .ps .clear').click(function () {
$('form').form('ps').value($('form').form('ps').value().substring(0, 200));
check_ps();
});
function check_ps() {
var num = 200 - $('form').form('ps').value().length;
if (num >= 0) {
$('#reg .ps').eq(0).css('display', 'block');
$('#reg .ps .num').eq(0).html(num);
$('#reg .ps').eq(1).css('display', 'none');
} else {
$('#reg .ps').eq(1).css('display', 'block');
$('#reg .ps .num').eq(1).html(Math.abs(num)).css('color', 'red');
$('#reg .ps').eq(0).css('display', 'none');
}
}
//在刷新页面后，还原所有的表单数据初始化状态
$('form').first().reset();

感谢收看本次教程！