javascript - javascript 表单验证 - 该函数无法执行验证

Question

这是我的表格：

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而不是验证表单数据。

score 1 · Accepted Answer

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 库？您可能会受益于使用其他人已经编写和测试过的代码。

score 1 · Accepted Answer

好的。你真的应该组织起来:)

替代方法

既然你有这种长表格；你可以：

使用类名根据需要标记必要的字段。
使用 HTML5 自定义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;
}

这样做还有两个好处；

您可以添加额外的表单字段而无需更改您的 javascript。只需在 HTML 中插入带有.required 类data-validation和data-error属性的元素。
您可以通过case在validateField()方法中添加另一个来添加额外的验证逻辑。

HTML5 表单验证

我们还可以使用适当的HTML5 表单验证；例如使用required属性而不是自定义.required类（以在线识别必填字段）。还有许多其他有用的功能，例如新input类型（email、number、url等）、占位符文本、自动对焦字段。但不幸的是，大多数主流浏览器版本还没有完全支持这些。

另一方面，“数据-”属性；至少是可用的，包括IE6（即使它并不能被旧浏览器真正识别）。这就是为什么，我认为目前上述方法对浏览器更友好。

有关 HTML5 表单的更多信息，请参阅此页面。

无论如何，这只是为了演示您应该如何构建/组织您的流程。应该有比这个更合乎逻辑的方法，但至少，这应该给你一个想法。

注意：如果您考虑这种方法，请不要忘记相应地更改您的DOCTYPE。

javascript - javascript 表单验证 - 该函数无法执行验证

2 回答 2

替代方法

HTML5 表单验证

Related

Reference