JavaScript表单即时验证表单即时验证 验证不成功不能提交验证不成功不能提交
主要为大家详细介绍了JavaScript表单即时验证，验证不成功不能提交，具有一定的参考价值，感兴趣的小伙伴
们可以参考一下
不能再让表单在提交按钮之后才被验证了！你输入的任何信息表单都会即时反应！
这个JavaScript的关键是onChange()事件，使用onKeyUp()事件完成是不行的，人家没有输入完毕，你就说人家不对，多不友
好啊╮(╯▽╰)╭
一、基本目标一、基本目标
一个表单认证页，如果输入的用户名超过10位则会立即在输入框旁边弹出提示：
如果密码少于6位，而且两次输入密码不一致同样弹出提示，
如果你没有勾选阅读条款的复选框，同样会弹出提示
知道你所有的项目满足设定的条件之前，提交按钮无效。
满足设定条件，表单通过get的方法提交。
二、制作过程二、制作过程
整个页面的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>formcheck</title>
<script type="text/javascript">
function checkusrn() {
var check = false;
var username = document.getElementById("username").value;
if (username.length > 10) {
document.getElementById("checktext1").innerHTML = " × 不要多于10位";
check = false;
} else {
document.getElementById("checktext1").innerHTML = " √";
check = true;
}
return check;
}
function checkpwd() {
var check = false;
var password = document.getElementById("password").value;
if (password.length < 6) {
document.getElementById("checktext2").innerHTML = " × 不要少于6位";
check = false;
} else {
document.getElementById("checktext2").innerHTML = " √";
check = true;
}
return check;
}
function checkpwdc() {
var check = false;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("pwdc").value;
if (password != pwdc) {
document.getElementById("checktext3").innerHTML = " × 两次输入密码不一致";
check = false;
} else {
document.getElementById("checktext3").innerHTML = " √";
check = true;
}
return check;
}
function checkcb() {
var check = false
评论0
最新资源