js简单表单验证（非弹出框）

登录的非弹出框的js验证

上一篇博客中我写了弹出框的，但是弹出框在界面中出现太频繁，会对用户造成不良印象，所以我就写了非弹出框的。

html

<input type="text" name="username" class="form-control" onblur="CheckInput(this,document.getElementById('username'))" placeholder="手机/邮箱/用户名" style="width: 30%;" /><span id="username" style="position: absolute;vertical-align:middle;line-height: 35px;" ></span>

<input  name="password" type="password" class="form-control" onblur="CheckInput(this,document.getElementById('password'))" placeholder="密码" style="width: 30%;" /><span id="password" style="position: absolute;vertical-align:middle;line-height: 35px;"></span>

要加上span标签，用来显示提示语句。

触发onblur事件，运行js代码。

js

function CheckInput(inputField,helpText){
if(inputField.value.length==0){
if(helpText!=null){
helpText.innerHTML="不能为空，请输入";
}return false;}
else{
if(helpText!=null){
helpText.innerHTML="";}
return true;} }

运行后的效果如下：

总结：

非弹出框需要加上span标签，用于输出语句。

出现的问题：

1、span会挤掉input——错位。

加上postion：absolute，使位置固定。

2、span中的内容会与input中的内容不对齐——垂直居中对齐。

要用上text-align和line-height来调整。

附上名言：

用冷静的目光去看待人世间的一切，才能活得坦荡，活得超然。