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

Make form validation via custom attributes

本文关键字：表单 验证 自定义属性      更新时间：2023-09-26

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

 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>

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

它看起来像这样：

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。

祝你好运。

您可以使用

placeholder属性、required属性setCustomValidity()设置为invalid事件时placeholder

var inputs = document.querySelectorAll("input:not([type=submit])");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].oninvalid = function(e) {
    e.target.setCustomValidity(e.target.placeholder)
  }
}
<form id="user_form" method="post">
  <label for="first_name">
    <input type="text" pattern="[a-zA-Z]+$" name="first_name" id="first_name" placeholder="Input letters a-z A-Z" required />
  </label>
  <br>
  <label for="email">
    <input type="email" name="email" id="email" autocomplete="off" placeholder="Valid Email is required" required />
  </label>
  <br>
  <input type="submit" />
</form>

相关文章：