javascript - 通过自定义属性进行表单验证

Question

请帮助我通过输入标记的自定义属性进行验证(在我的例子中:验证)。帮助我更改我的代码，使其变得更加动态和可重用。

 var validation = function validation(){// out of grid - rename js name

        //validate first name - only letters
        var only_letters = /^[A-Za-z]+$/;// allow only letters

        if(firstName.value.length === 0){
            document.getElementsByClassName("error")[0].innerHTML="First Name is required";
            formIsValid = false;
        }
        else
        if(firstName.value.match(only_letters)){
            document.getElementsByClassName("error")[0].innerHTML="";
        }
        else{
            document.getElementsByClassName("error")[0].innerHTML="Only characters allowed";
            formIsValid = false;
        }

        //validate email

        var email_letters = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

        if(email.value.length === 0){
            document.getElementsByClassName("error")[2].innerHTML="Email is required";
            formIsValid = false;
        }
        else
        if(email.value.match(email_letters)){
            document.getElementsByClassName("error")[2].innerHTML="";
        }
        else{
            document.getElementsByClassName("error")[2].innerHTML="Incorrect email format";
            formIsValid = false;
        }

<form id="user_form" method="post">

    <p> <input type="text" name="first_name" id="first_name" placeholder="First Name" validation="isRequired, correctFormat" /></p>
    <span class="error"></span>
<p><input type="text" name="email" id="email" autocomplete="off" placeholder="Email" validation="isRequired, correctFormat" /></p>
<span class="error"></span>
  </form>

Answer 1

如果你仔细观察，你会发现本质上只有一种方法。 创建一个获取元素、正则表达式、响应容器并返回字符串的方法。

它看起来像这样:

function validateMePls(var field, var regex, var placeholder){
    var isValid = "";
    /** do all your checks here (length, regex, etc), appending 'isValid', then return it at the end */
};

var isValid = validateMePls(email, email_letters, document.getElementsByClassName("error")[2]);

/** and now you check 'isValid' for something in it, so you know if you have an error or not */

这基本上就是代码的优化版本的外观。

对于“接近 Java”的代码感到抱歉，但我最近没有做任何 Javascript。

祝你好运。