表单验证

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" οnfοcus="showAlert('user','用户名必填')"  οnblur="hiddenAlert('user','用户名不能为空')"/><span id="userspan"></span></br>

　　　　　　密码：<input type="password" id="pwd" οnfοcus="showAlert('pwd','密码必填')"  οnblur="hiddenAlert('pwd','密码不能为空')"/><span id="pwdspan"></span></br>/>

　　　　　　<input type="submit" value="注册"/>

　　</form>

　　　　οnfοcus="';当元素获得焦点时，也就是当这个文本框被选中输入内容时

　　　　οnblur="'　　　当元素失去焦点时，就是当文本框输入完成，切换到下一个文本框时

　　<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>

转载于:https://www.cnblogs.com/Zs-book1/p/10458423.html