html不满足条件不提交,JavaScript表单即时验证 验证不成功不能提交

不能再让表单在提交按钮之后才被验证了！你输入的任何信息表单都会即时反应！

这个JavaScript的关键是onChange()事件，使用onKeyUp()事件完成是不行的，人家没有输入完毕，你就说人家不对，多不友好啊╮(╯▽╰)╭

一、基本目标

一个表单认证页，如果输入的用户名超过10位则会立即在输入框旁边弹出提示：

如果密码少于6位，而且两次输入密码不一致同样弹出提示，

如果你没有勾选阅读条款的复选框，同样会弹出提示

知道你所有的项目满足设定的条件之前，提交按钮无效。

满足设定条件，表单通过get的方法提交。

二、制作过程

整个页面的代码如下：

formcheck

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

if (!document.getElementsByName("checkbox")[0].checked) {

document.getElementById("checktext4").innerHTML = " × 请同意我们的条款才可以继续申请";

check = false;

} else {

document.getElementById("checktext4").innerHTML = "";

check = true;

}

return check;

}

function check() {

var check = checkusrn() && checkpwd() && checkpwdc() && checkcb();

return check;

}

表单验证小例子

请输入信息

用户名：

οnchange="checkusrn()" />

密码：

οnchange="checkpwd()" />

确认密码：

我已经阅读了XX条款并不能同意得更多

下面一个一个函数进行说明：

1.先完成html页面的表单部分，也就是整个页面主体

部分

表单验证小例子

请输入信息

用户名：

οnchange="checkusrn()" />

密码：

οnchange="checkpwd()" />

确认密码：

我已经阅读了XX条款并不能同意得更多

每一个表单的都分别设置了id与name，id是给上面的js函数getelementbyid使用的，name是给action的get方法使用。

onchange()是当用户输入完毕，元素改变之后才js的函数调用，onkeyup是完成一个字母输入就进行js函数调用，那当然选择前者。

总表单的提交是首先要通过onsubmit()方法的判断，如果这个onsubmit()的真值不为真，就不让提交，一般这个值默认为真，表单是无条件就条件，所以我们要让其返回check()所返回的值，看看此表单是否被允许调教

2.JS函数，也就是

头的