您的位置：首页 > Web前端 > JavaScript

JS实现表单验证输入框提示

2018-01-25 17:43 405 查看

JS实现表单验证输入框提示

一、步骤
1、设计好表单页面，在每个输入框后加入强调标签<span>
2、利用事件驱动函数，在输入框上绑定指定事件
3、编写相应函数，使得触发事件时达到理想结果
注：
在编写函数时，需要通过Id信息获取输入框内容如：
var userName= document.getElementById("in7").value;

然后再通过以下方式获取强调标签<span>进行标签体值的设置
var one =document.getElementById("out1");

one.innerHTML="用户名不能为空";

二、代码练习
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>表单校验03</title>
<script>

//编写提交表单核对函数
function checkF(){

//获取用户名信息
var userName= document.getElementById("in7").value;

//获取验证码框信息
var check= document.getElementById("in5").value;
//获取提示框1
var one =document.getElementById("out1");

//获取提示框3
var three =document.getElementById("out3");

if( userName==null || userName==""){

one.innerHTML="用户名不能为空";
}
else{

one.innerHTML="此用户名可以使用";
}
}
function checkF2(){
//获取密码框信息
var passWord= document.getElementById("in6").value;
//获取提示框2
var two =document.getElementById("out2");
two.innerHTML=passWord.length+1+"个字符";
}
</script>
</head>
<body >
<form >
<table border="1">
<tr>
<td >用户:</td>
<td> <input id="in7" type="text" onclick="checkF()"/><span id="out1"></span></td>
</tr>
<tr>
<td >密码:</td>
<td> <input id="in6" type="password" onkeydown="checkF2()"/><span id="out2" ></span></td>
</tr>
<tr>
<td >验证码：</td>
<td> <input id="in5" type="text" onkeydown="checkF()"/><span id="out3"></span></td>
</tr>
</table>
<input type="submit" value="注册" />
</form>
</body>

</html>

三、效果展示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航