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

学习要点：

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

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

一．问题所在

QQ截图20190517093202.png

二．设置代码

界面 HTML

<dd>用 户 名： <input type="text" name="user" class="text" />
<span class="info info_user">请输入用户名，2~20 位，
由字母、数字和下划线组成！</span>
<span class="error error_user">输入不合法，请重新输入！</span>
<span class="succ succ_user">可用</span>
</dd>

界面 CSS

#reg dl dd span.info, #reg dl dd span.error,#reg dl dd span.succ {
font-size:12px;
width:165px;
height:32px;
line-height:32px;
padding:0 0 0 35px;
display:none;
position:absolute;
letter-spacing:1px;
}
#reg dl dd span.info {
background:url(images/reg_info.png) no-repeat;
color:#333;
}
#reg dl dd span.error {
background:url(images/reg_error.png) no-repeat;
color:red;
}
#reg dl dd span.succ {
line-height:14px;
padding:0 0 0 20px;
background:url(images/reg_succ.png) no-repeat;
color:green;
}
#reg dl dd span.info_user {
height:43px;
line-height:18px;
padding-top:7px;
background:url(images/reg_info2.png) no-repeat;
top:3px;
left:295px;
}
#reg dl dd span.error_user {
top:3px;
left:295px;
}
#reg dl dd span.succ_user {
top:12px;
left:295px;
}

JS 代码

$('form').form('user').bind('focus', function () {
$('#reg .info_user').css('display', 'block');
$('#reg .succ_user').css('display', 'none');
$('#reg .error_user').css('display', 'none');
}).bind('blur', function () {
if (trim($(this).value()) == '') {
$('#reg .info_user').css('display', 'none');
} else if (!/[a-zA-Z0-9_]{2,20}/.test($(this).value())) {
$('#reg .error_user').css('display', 'block');
$('#reg .info_user').css('display', 'none');
} else {
$('#reg .succ_user').css('display', 'block');
$('#reg .error_user').css('display', 'none');
$('#reg .info_user').css('display', 'none');
}
});
//设置一个绑定事件的方法
Base.prototype.bind = function (event, fn) {
for (var i = 0; i < this.elements.length; i ++) {
addEvent(this.elements[i], event, fn);
}
return this;
};
//设置一个获取表单字段的方法
Base.prototype.form = function (name) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i] = this.elements[i][name];
}
return this;
};
//设置表单 value 内容
Base.prototype.value = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 0) {
return this.elements[i].value;
}
this.elements[i].value = str;
}
return this;
};
//多个 class 正则获取
if ((new RegExp('(\\s|^)' +className +'(\\s|$)')).test(all[i].className)) {
temps.push(all[i]);
}

感谢收看本次教程！