html文件//(这里只大致写一下用户名密码文本框,其他的文本框用到的函数都是一样)
<form action="#" mothed="post">
用户名:<input type="text" id="user"/></br>
密码:<input type="password" id="pwd"/>
<input type="submit" value="注册"/>
</form>
正常情况下我们需要点击注册按钮,这样表单就会收集所有表单内的信息,然后发送的后台与数据库进行比较,可是大多数情况下,用户更希望在输入信息的时候就可以出现提示文本,比如当用户名文本框获得输入焦点时,出现提示文本:必填,如果文本框内容为空时,红色警示字体提示:用户名不能为空;代码如下:
<form action="#" mothed="post">
input标签后加span标签,内部写红色警文本;
警示文本及标签id都以参数的形式传递给函数
用户名:<input type="text" id="user" onfocus="showAlert('user','用户名必填')" onblur="hiddenAlert('user','用户名不能为空')"/><span id="userspan"></span></br>
密码:<input type="password" id="pwd" onfocus="showAlert('pwd','密码必填')" onblur="hiddenAlert('pwd','密码不能为空')"/><span id="pwdspan"></span></br>/>
<input type="submit" value="注册"/>
</form>
onfocus="';当元素获得焦点时,也就是当这个文本框被选中输入内容时
onblur="' 当元素失去焦点时,就是当文本框输入完成,切换到下一个文本框时
<script>
//当获得焦点时,显示红色 必填 文本
function showAlert(id,info){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; //获得id名为 变量id+span 的标签元素,并修改文本内容为传递过来的内容info
}
//当失去焦点时,先判断文本框的值是否为空,如果为空,显示文本 ***不能为空!;显示的文本及文本框的id都以参数的形式传递给函数
function hiddenAlert(id,info){
var txt=document.getElementByid(id).value; //获取输入框的文本值,
//判断文本框的值是否为空;如果为空,警示文本内容设置为参数值;否则,span文本设置为空,不显示警示文本;
第一个文本框为例:hiddenAlert('user','用户名不能为空'
if(txt==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";//设置span标签内容为空
}
}
</script>