gpt4 book ai didi

javascript - 使用 js 表单验证器禁用 html 表单提交按钮

转载 作者:太空宇宙 更新时间:2023-11-04 16:08:18 25 4
gpt4 key购买 nike

我正在尝试使用 bool 值制作一个简单的 js 表单验证器,它检查来自 html 的输入是否正确,如果字段正确则启用提交按钮,否则禁用它。它禁用提交按钮,但当数据输入正确时,它不会重新启用提交按钮。

    var validemail = false ;
var validpassword = false ;
var validusername = false ;
var validage = false ;

function verifyemail()
{
var email = document.getElementById("signupemail").value ;
var error = document.getElementById("signupemailerrors") ;
var emailregex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ;

if(email.length < 254){
if( email.length > 0 ){
if(email.match(emailregex)){
error.innerHTML = "";
validemail = true ;
}
else
{
error.innerHTML = "Invalid email address.";
validemail = false ;
}

}else

{
error.innerHTML = "Please fill in." ;
validemail = false ;
}
} else
{
error.innerHTML = "Maximum length exceeded.";
validemail= false ;
}
}

function verifypassword(){
var password = document.getElementById("signuppassword").value;
var passworderror= document.getElementById("signuppassworderrors") ;
if (password.length < 254){
if(password.length > 7){
passworderror.innerHTML = "";
validpassword = true ;

}
else if(password.length == 0)
{
passworderror.innerHTML = "Please fill in.";
validpassword = false ;
}
else
{
passworderror.innerHTML = "At least 8 characters required.";
validpassword = false ;
}
}
else
{
passworderror.innerHTML = "Maximum length exceeded.";
validpassword = false ;
}
}

function verifyusername(){
var username = document.getElementById("signupusername").value ;
var usernamerror = document.getElementById("signupusernameerrors") ;

if (username.length == 0)
{
usernamerror.innerHTML = "Please fill in.";
validusername = false;
}
else if (username.length > 50)
{
usernamerror.innerHTML = "Maximum length exceeded.";
validusername = false;
}
else
{
usernamerror.innerHTML = "";
validusername = true;
}
}

function verifyage(){
var age = document.getElementById("signupage").value ;
var ageerror = document.getElementById("signupageerrors") ;
var ageregex = /^\d+$/;

if(age.length == 0){
ageerror.innerHTML = "Please fill this field";
validage = false;
}
else
{
if (age.match(ageregex)){
if (age == 0){
ageerror.innerHTML = "Please provide your real age." ;
validage = false;
}
else if(age > 130){
ageerror.innerHTML = "Please provide your real age." ;
validage = false;
}
else
{
ageerror.innerHTML = "" ;
validage = true;
}

}else
{
ageerror.innerHTML = "Only numbers allowed."
validage = false;
}
}
}


function verifysubmit(){
verifyage();
verifyemail();
verifypassword();
verifyusername();
if (validage == true && validemail == true && validpassword == true && validusername == true)
{
document.getElementById("signupformsubmit").disabled = false ;
}
else{
document.getElementById("signupformsubmit").disabled = true ;
}
}

最佳答案

更新测试和工作代码:

<input type="text" id="signupemail" oninput="verifyemail();">
<div id="signupemailerrors"></div>
<input type="password" id="signuppassword" oninput="verifypassword();">
<div id="signuppassworderrors"></div>
<input type="text" id="signupage" oninput="verifyage();">
<div id="signupageerrors"></div>
<input type="text" id="signupusername" oninput="verifyusername();">
<div id="signupusernameerrors"></div>
<input type="submit" id="signupformsubmit">

<script>

var validemail = false ;
var validpassword = false ;
var validusername = false ;
var validage = false ;

verifysubmit();

function verifyemail(){

var email = document.getElementById("signupemail").value;
var emailerror = document.getElementById("signupemailerrors");
var emailregex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

validemail = true;
emailerror.innerHTML = "";

if (email.length == 0) {
emailerror.innerHTML = "Please fill in." ;
validemail = false ;
} else if (email.length > 254) {
emailerror.innerHTML = "Maximum length exceeded.";
validemail= false ;
} else if (!email.match(emailregex)) {
emailerror.innerHTML = "Invalid email address.";
validemail = false ;
}

verifysubmit();

}


function verifypassword(){

var password = document.getElementById("signuppassword").value;
var passworderror= document.getElementById("signuppassworderrors") ;

validpassword = true;
passworderror.innerHTML = "";

if (password.length == 0) {
passworderror.innerHTML = "Please fill in." ;
validpassword = false ;
} else if (password.length < 8) {
passworderror.innerHTML = "At least 8 characters required.";
validpassword= false ;
} else if (password.length > 254) {
passworderror.innerHTML = "Maximum length exceeded.";
validpassword= false ;
}

verifysubmit();

}


function verifyusername(){

var username = document.getElementById("signupusername").value;
var usernamerror= document.getElementById("signupusernameerrors") ;

validusername = true;
usernamerror.innerHTML = "";

if (username.length == 0) {
usernamerror.innerHTML = "Please fill in." ;
validusername = false ;
} else if (username.length < 3) {
usernamerror.innerHTML = "At least 3 characters required.";
validusername= false ;
} else if (username.length > 50) {
usernamerror.innerHTML = "Maximum length exceeded.";
validusername= false ;
}

verifysubmit();

}


function verifyage(){

var age = document.getElementById("signupage").value ;
var ageerror = document.getElementById("signupageerrors") ;
var ageregex = /^\d+$/;

validage = true;
ageerror.innerHTML = "";

if (age.length == 0){
ageerror.innerHTML = "Please fill this field";
validage = false;
} else if ((age > 130) || (age == 0)) {
ageerror.innerHTML = "Please provide your real age." ;
validage = false;
} else if (!age.match(ageregex)) {
ageerror.innerHTML = "Only numbers allowed."
validage = false;
}

verifysubmit();

}


function verifysubmit() {

if (!validage || !validemail || !validpassword || !validusername)
document.getElementById("signupformsubmit").disabled = true;
else
document.getElementById("signupformsubmit").disabled = false;

console.log(validage + " " + validemail + " " + validpassword + " " + validusername);
}

</script>

关于javascript - 使用 js 表单验证器禁用 html 表单提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36333900/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com