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;} }
运行后的效果如下:
总结:
非弹出框需要加上span标签,用于输出语句。
出现的问题:
1、span会挤掉input——错位。
加上postion:absolute,使位置固定。
2、span中的内容会与input中的内容不对齐——垂直居中对齐。
要用上text-align和line-height来调整。
附上名言:
用冷静的目光去看待人世间的一切,才能活得坦荡,活得超然。
上一篇: *栏目如何默认读取子级栏目里面的文章
下一篇: Android 中自动换行的标签实现