Question

首先感谢您的任何帮助。

我有八个if语句验证我的表单字段。前六个工作正常，但最后两个没有（我已经评论了验证停止工作的地方），因为它只是重新加载页面，好像表单已提交。

我需要帮助的两件事... 1）为什么我的最后两个if语句不起作用，2）是否有比这更简单，更复杂，更有效，更好的验证方式？你能告诉我吗？

脚本

 $("#myform").submit(function(){
    // Variables
    var fname=jQuery('#fname').val();
    var emailval=jQuery('#email').val();
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
    var vemail=mailformat.test(emailval);
    var phone = jQuery('#phone').val();


    // ALL THREE FIELDS ARE INVALID
    if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) {
        // Set the border color to red
        document.getElementById("fname").style.borderColor = "#E34234";
        document.getElementById("email").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors
        jQuery('.name_error').show();
        jQuery('.email_error').show();          
        jQuery('.phone_error').show();
        return false;
    } 
    // Name is valid (PHONE & EMAIL IS INVALID) 
    else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) {
        // Ensure the Name Field is styled correctly and the error is hidden
        document.getElementById("fname").style.borderColor = "#ccc";
        jQuery('.name_error').hide();

        // Set the border color to red
        document.getElementById("email").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors
        jQuery('.email_error').show();          
        jQuery('.phone_error').show();
        return false;
    } 
    // Phone is valid (NAME & EMAIL IS INVALID)
    else if ($.trim(fname).length == 0 && $.trim(phone).length > 6 && ($.trim(emailval).length == 0 || vemail==false)) {
        // Ensure the Phone Field is styled correctly and the error is hidden
        document.getElementById("phone").style.borderColor = "#ccc";
        jQuery('.phone_error').hide();

        // Set the border color to red
        document.getElementById("email").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');

        // Display the errors
        jQuery('.name_error').show();           
        jQuery('.email_error').show();
        return false;
    }
    // Email is valid (NAME & PHONE IS INVALID)
    else if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure the Email Field is styled correctly and the error is hidden
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.email_error').hide();

        // Set the border color to red
        document.getElementById("fname").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors
        jQuery('.name_error').show();           
        jQuery('.phone_error').show();
        return false;
    } 
    // Name is entered and Email is valid (PHONE IS INVALID)
    else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure the Name & Email Fields are styled correctly and the errors are hidden
        document.getElementById("fname").style.borderColor = "#ccc";
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.name_error').hide();
        jQuery('.email_error').hide();

        // Set the border color to red
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors       
        jQuery('.phone_error').show();
        return false;
    }
    // Phone has more than 6 characters and Email is valid (NAME IS INVALID)
    else if ($.trim(fname).length == 0 && ($.trim(phone).length != 0 || $.trim(phone).length > 6) && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure the Phone & Email Fields are styled correctly and the errors are hidden
        document.getElementById("phone").style.borderColor = "#ccc";
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.phone_error').hide();
        jQuery('.email_error').hide();

        // Set the border color to red
        document.getElementById("fname").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');

        // Display the errors       
        jQuery('.name_error').show();
        return false;
    } 
    // *** HERE DOWN IS WHERE THINGS NO LONGER WORK AS THEY SHOULD *** 
    // Phone has more than 6 characters and Name is entered (EMAIL IS INVALID)
    else if (($.trim(fname).length != 0 && $.trim(phone).length > 6) && ($.trim(emailval).length == 0 || vemail==false)) {
        // Ensure the Name & Phone Fields are styled correctly and the errors are hidden
        document.getElementById("name").style.borderColor = "#ccc";
        document.getElementById("phone").style.borderColor = "#ccc";
        jQuery('.name_error').hide();
        jQuery('.phone_error').hide();

        // Set the border color to red
        document.getElementById("email").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email Address</span>');

        // Display the errors       
        jQuery('.email_error').show();
        alert(vemail);
        return false;
    } 
    // ALL FIELDS ARE GOOD
    else if ($.trim(fname).length != 0 && $.trim(phone).length > 6 && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure all fields are styled correctly and errors are hidden
        document.getElementById("name").style.borderColor = "#ccc";
        document.getElementById("phone").style.borderColor = "#ccc";
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.name_error').hide();
        jQuery('.phone_error').hide();
        jQuery('.email_error').hide();

        alert("All is good. We're ready to submit!")
        return false;
    }
    else {

        // ALERT
        alert("None of the validation is working");
        return false;
    }

});

HTML - 只是与此相关的字段集......

    <fieldset>
        <h1 class="fs-title mt16 thick">HEADDER</h1>

        <input type="text" id="fname" name="fname" placeholder="First Name" />
        <div class="name_error"></div>
        <input type="email" id="email" name="email" placeholder="What is your email address?" />
        <div class="email_error"></div>
        <input type="tel" id="phone" name="phone" placeholder="Phone Number (i.e. 5555551212)" />
        <div class="phone_error"></div>
        <label class="option-button uppercase thick"><input type="radio" name="contact" value="email" />Contact me by email</label>
        <label class="option-button uppercase thick"><input type="radio" name="contact" value="phone" checked />Contact me by phone</label>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="submit" name="submit" class="submit action-button" value="Submit" />
    </fieldset>

Answer 1

WOWA！

嗨，

您可以使用属性pattern和<input type="text" id="example" name="example" required pattern="[A-Za-z]{3}"/>。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

我希望这有帮助，

里斯

<强>参考文献：
http://www.w3schools.com/tags/att_input_pattern.asp http://www.w3schools.com/tags/att_input_required.asp

Answer 2

您的代码会遇到最后两个else if，但您的下一行代码都会失败：

document.getElementById("name").style.borderColor = "#ccc";

因为标识符不存在，所以它应该是fname。控制台输出Cannot read property 'style' of null，并且在代码失败时，false未返回，因此表单会尝试正常提交，从而导致页面重新加载。

您可以使用控制台（在大多数浏览器中为F12）查看这些错误。大多数还会指向发生错误的行以进行进一步评估。当页面重新加载时，您需要勾选“保留日志”。（在Chrome中说这个，在其他浏览器中可能会有所不同）看到它们。

Answer 3

您的代码中存在大量重复内容。绝对有更好的方法来做到这一点。

这样的事情怎么样：

import java.net.URL;
import java.net.URLClassLoader;
import java.util.zip.ZipEntry;
import java.util.zip.ZipInputStream;

public class FileFinder {

    public static void main(String[] args) throws Exception {

        String file = <your file name>;

        ClassLoader cl = ClassLoader.getSystemClassLoader();

        URL[] urls = ((URLClassLoader)cl).getURLs();

        for(URL url: urls){
            listFiles(file, url);
        }
    }

    private static void listFiles(String file, URL url) throws Exception{
        ZipInputStream zip = new ZipInputStream(url.openStream());
          while(true) {
            ZipEntry e = zip.getNextEntry();
            if (e == null)
              break;
            String name = e.getName();
            if (name.endsWith(file)) {
                System.out.println(url.toString() + " -> " + name);
            }
          }
    }

}

然后根据此规范生成表单和验证规则。

表单验证停止工作接近结束

3 个答案: