这是我的表格：
function formValidator(){
var a = document.getElementById('uname');
var b = document.getElementById('m_photo');
var c= document.getElementById('fname');
var d= document.getElementById('lname');
var e= document.getElementById('p_add');
var f= document.getElementById('c_add');
var g= document.getElementById('b_add');
var h= document.getElementById('country');
var i= document.getElementById('state');
var j= document.getElementById('city');
var k= document.getElementById('pcode');
var l= document.getElementById('id_proof');
var m= document.getElementById('quali_proof');
var n= document.getElementById('p_addproof');
var o= document.getElementById('c_addproof');
var p= document.getElementById('resume');
var q= document.getElementById('dob');
var r= document.getElementById('mobile');
var s= document.getElementById('email');
var t= document.getElementById('quali');
var u= document.getElementById('dsgn');
var v= document.getElementById('rep_person');
var w= document.getElementById('join');
var x= document.getElementById('p_hist');
var y= document.getElementById('sh_des');
var z= document.getElementById('app_by');
var A= document.getElementById('accept');
// Check each input in the order that it appears in the form!
if(lengthRestriction(a, 6, 8)){
if(""==b.value)
{alert("Please Upload the Member Photo");
if(isAlphabet(c, "Please enter only Alphabets for First Name")){
if(isAlphabet(d, "Please enter only Alphabets for Last Name")){
if(e==null || e=="")
{alert("Please Enter your Permanent Address");
if(f==null || f=="")
{alert("Please Enter your Current Address");
if(g==null || g=="")
{alert("Please Enter your Branch Address");
if(h==null || h=="")
{alert("Please Enter the Country Name");
if(i==null || i=="")
{alert("Please Enter the State Name");
if(j==null || j=="")
{alert("Please Enter the City Name");
//if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(k, "Please enter a valid 6 digit Pin Code")){
if(l==null || l=="")
{alert("Please Upload the Id-Proof");
if(m==null || m=="")
{alert("Please Upload the Qualification Proof");
if(n==null || n=="")
{alert("Please Upload the Permanent Address Proof");
if(o==null || o=="")
{alert("Please Upload the Current Address Proof");
if(p==null || p=="")
{alert("Please Upload the Resume");
if(q==null || q=="")
{alert("Please Upload the D.O.B Proof");
if(lengthRestriction(r,10,10)){
if(emailValidator(s, "Please enter a valid email address")){
if(t==null || t=="")
{alert("Please Enter the Qualification Details");
if(madeSelection(u, "Please Choose a Designation")){
if(v==null || v=="")
{alert("Please Enter the name of the Reporting Person");
if(w==null || w=="")
{alert("Please Enter the Joining Date");
if(x==null || x=="")
{alert("Please Write Something about Past History");
if(y==null || y=="")
{alert("Please give some Description about the Member");
if(z==null || z=="")
{alert("Empty Field: APPOINTED BY");
if(madeSelection(A, "Please Accept the terms and conditions")){
return true;
}}
}}
}}
}}
}}
}}
}}
}}
}}
}}
}}
}}
}}
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == "Select Designation"){
alert(helperMsg);
elem.focus();
return false;
}else
{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
此处仅对前两种情况进行验证。我无法弄清楚这个问题。任何人都可以帮忙吗？
我需要在用户移动到下一个字段之前验证当前字段，因此所有if语句都嵌套以遵循特定的顺序。
另外，我希望将表单数据重定向到另一个文件。我使用了action="abc.html"（例如它）。
单击提交按钮后，它将直接转到abc.html，而不是验证表单数据。
答案 0 :(得分：1)
if(lengthRestriction(a, 6, 8)){
if(""==b.value)
{alert("Please Upload the Member Photo");
if(isAlphabet(c, "Please enter only Alphabets for First Name")){
您有一些函数（如上面显示的lengthRestriction和isAlphabet），如果该字段有效，则返回 true。但是，您的内联逻辑（如上面的b）解析为 false，如果该字段有效。我建议您编写一个“非空”函数（或者更改if语句中的逻辑），以便if 如果字段有效则为true 。
作为一个建议，我承认我不知道你对这个项目有多少控制权;你考虑过使用像jquery这样的javascript库吗？您可能会受益于使用其他人已经编写和测试过的代码。
答案 1 :(得分：1)
行。你应该真的组织：）
因为你有这种长形式;你可以：
data-属性为每个字段分配验证逻辑和相应的错误消息。例如：
<input id="fname" type="text" class="required" data-validation="alphanumeric"
data-error="Please enter your first name." />
<input id="age" type="text" class="required" data-validation="numeric"
data-error="Please enter your age." />
<input id="accept" type="checkbox" class="required" data-validation="check"
data-error="Please accept the terms of agreement." />
然后;
例如：
function validateForm() {
// get the .required fields as NodeList
var requiredElems = document.getElementsByClassName('required') ||
document.querySelectorAll('.required');
// validate fields one-by-one
for (var i = 0; i < requiredElems.length; i++) {
var elem = requiredElems[i];
if (validateField(elem) === false) {
alert(elem.getAttribute('data-error')); //get the error message from the custom data attribute and alert.
elem.focus();
return false; //break;
}
}
return true;
}
function validateField(elem) {
var rxp, valid = true,
// get the validation type from the custom data attribute.
validationType = elem.getAttribute('data-validation');
// all validation logic in one place
switch (validationType) {
case 'alphanumeric':
rxp = /^[0-9a-zA-Z]+$/;
valid = rxp.test(elem.value);
break;
case 'numeric':
rxp = /^[0-9]+$/;
valid = rxp.test(elem.value);
break;
case 'email':
rxp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
valid = rxp.test(elem.value);
break;
case 'check':
valid = elem.type == 'checkbox' ? elem.checked : true;
break;
}
return valid;
}
这还有两个好处;
.required在HTML中插入元素
class，data-validation和data-error属性。case方法中添加其他validateField()即可添加额外的验证逻辑。我们也可以使用正确的 HTML5表格验证;例如使用 required属性而不是自定义.required类（以识别内联所需的字段）。还有许多其他有用的功能，例如新的input类型（email，number，url等），占位符文本，自动聚焦字段。但不幸的是，大多数主流浏览器版本都是not fully supported。
'数据 - '属性;是at least usable, including IE6（即使旧浏览器没有真正识别它）。这就是为什么，我认为上面的方法目前更适合浏览器。
有关HTML5表单的更多信息，请参阅this page。
无论如何，这只是为了演示如何构建/组织流程。应该有比这更合乎逻辑的方法，但至少，这应该给你一个想法。
注意： 如果您考虑采用这种方法，请不要忘记相应地更改 DOCTYPE 。 < / p>