欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js简单表单验证(非弹出框)

程序员文章站 2022-05-31 18:47:14
...

登录的非弹出框的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;} }

运行后的效果如下:

js简单表单验证(非弹出框)

总结:

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

出现的问题:

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

加上postion:absolute,使位置固定。

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

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

附上名言:

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