【发布时间】：2017-04-06 06:59:05
【问题描述】：
如果所有字段都以正确的模式填写，我想启用提交按钮，但它不起作用。我尝试将返回值存储在每个函数的变量中，但没有进行任何更改，所有验证都运行良好，但禁用的提交按钮没有启用。
我无法在变量中获得返回值。任何帮助都将不胜感激。这是我的代码：
$(document).ready(function(){
function Val_Fname()
{
$("#f_name").keyup(function(){
var fn = $(this).val();
if(fn.length<=0)
{
$(this).attr("Placeholder","Required Field");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[A-Za-z]+$/;
if(reg.test(fn))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_Mname()
{
$("#m_name").keyup(function(){
var mn = $(this).val();
if(mn.length<=0)
{
$(this).attr("Placeholder","Required Field");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[A-Za-z]+$/;
if(reg.test(mn))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_Lname()
{
$("#l_name").keyup(function(){
var ln = $(this).val();
if(ln.length<=0)
{
$(this).attr("Placeholder","Required Field");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[A-Za-z]+$/;
if(reg.test(ln))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_em()
{
$("#email").keyup(function(){
var em = $(this).val();
if(em.length<=0)
{
$(this).attr("placeholder","Email can not be blank");
$(this).attr("style","color:red;");
return 0;
}
else
{
var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
if(reg.test(em))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function Val_en()
{
$("#enroll").keyup(function(){
var enroll = $(this).val();
if(enroll.length<=0)
{
$(this).attr("placeholder","Enrollment can not be blank");
$(this).attr("style","color:red;");
return 0;
}
else if(enroll.length>12 || enroll.length<12) {
$(this).attr("style","color:red;");
return 0;
}
else if(enroll.length= =12)
{
var reg=/^[0-9][0-9]{11}$/;
if(reg.test(enroll))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
});
}
function Val_mb()
{
$("#mobile").keyup(function(){
var mob=$(this).val();
if(mob.length<=0)
{
$(this).attr("placeholder","Mobile Number can not be blank");
$(this).attr("style","color:red;");
return 0;
}
else if(mob.length>10 || mob.length<10)
{
$(this).attr("style","color:red;");
return 0;
}
else if(mob.length==10)
{
var reg = /^[0-9][0-9]{9}$/;
if(reg.test(mob))
{
$(this).attr("style","color:Black;");
return 1;
}
else
{
$(this).attr("style","color:red;");
return 0;
}
}
});
}
function submitbutton()
{
var z = Val_Fname();
var y = Val_Mname();
var x = Val_Lname();
var w = Val_em();
var v = Val_en();
var u = Val_mb();
if(z==1 && y==1 && x==1 && w==1 && v==1 && u==1)
{
$("#subs_btn").attr("disabled",false);
$("#subs_btn").attr("style","background:rgba(0, 186, 107, 0.71);");
}
else
{
$("#subs_btn").attr("disabled",true);
$("#subs_btn").attr("style","background:grey;");
}
}
submitbutton();
$("#subs_btn").click(function(){
$("#reg_form").submit();
});
});form
{
display:block;
width:35%;
margin:10em auto;
text-align:center;
box-shadow:0px 4px 8px #818080;
background:#eee;
border-top-right-radius:7px;
border-top-left-radius:7px;
font-family:calibri;
padding:1em;
overflow:hidden;
}
form input[type="button"]
{
width: 66.2%;
padding: .7em;
background: rgba(0, 186, 107, 0.71);
border: none;
color: #fefefe;
cursor: pointer;
margin-top: 1em;
font-size: 1.2em;
text-shadow:0px 0px 10px black;
}
form input[type="reset"]
{
width:20%;
padding: .7em;
background: rgba(89, 93, 91, 0.7);
border: none;
color: #fefefe;
cursor: pointer;
margin-top: 1em;
font-size: 1.2em;
text-shadow:0px 0px 10px black;
}
form input[type="text"]
{
margin:.3em;
width:40%;
padding:.3em;
}
form h4
{
display:block;
background:#757575;
margin:-.8em;
margin-bottom:0.6em;
padding:.7em;
font-size:1.5em;
color:#fffcfc;
text-shadow:0px 0px 10px black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>JS Form Validation</title>
</head>
<body>
<form method="get" id="reg_form">
<h4>Student Registration Form</h4>
<input type="text" name="f_name" id="f_name" placeholder="First Name">
<input type="text" name="m_name" id="m_name" placeholder="Middle Name">
<input type="text" name="l_name" id="l_name" placeholder="Last Name">
<input type="text" name="email" id="email" placeholder="Email">
<input type="text" name="enroll" id="enroll" placeholder="Enrollment No">
<input type="text" name="mobile" id="mobile" placeholder="Mobile">
<input type="button" id="subs_btn" value="Subscribe">
<input type="Reset" name="Reset" id="Reset" value="Reset">
</form>
</body>
</html>【问题讨论】：
-
嗨，检查这个答案：stackoverflow.com/questions/18907198/… 并且除了接受的答案之外，每次用户在字段中输入内容时，我都会控制表单中的每个提交值。如果一切正常。然后启用按钮。
-
您需要调用一个函数，传入您想要返回的值，而不是从 keyup 事件处理程序中返回一个值。
-
在您的 Jquery 方法中，
Val_en()方法存在一些语法问题，我猜您错误地添加了额外的大括号。由于那可能是它不工作。我已经编辑了你的 Js 代码部分。现在检查。希望这会有所帮助。
标签： javascript