Javascript 使用自定义正则表达式验证表单

我想使用我的自定义数据属性验证表单，但不确定这是如何完成的。如果需要，我还希望在数据属性中显示错误消息

我正在寻找与数据属性中的正则表达式值相匹配并与相应输入值相匹配的JavaScript

我有以下表格

<form id="loginForm" name="loginForm">
                    <ul>
                        <li>
                            <label for="Username">Username:</label>
                            <input type="email" data-validation-error="Please enter a username" data-validation-use="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" id="username" name="username" maxlength="254" class="required" />
                        </li>
                        <li>
                            <label for="Password">Password:</label>
                            <input type="password" data-validation-error="Please enter a password" data-validation-use="^[a-zA-Z]\w{5,12}$" id="password" name="password" value="" maxlength="12" class="required" />
                        </li>
                    </ul>
                    <input type="submit" value="Login" class="button" name="loginBtn" id="loginBtn" />
            </form>

用户名：


密码：

如果您只为现代浏览器开发，您可以为此使用一些不错的功能：

列表项用户名字段使用输入类型电子邮件。浏览器将负责验证

使用属性required。如果字段中没有值，浏览器将不允许用户提交

使用属性模式。如果没有与给定模式匹配的值，浏览器将不允许用户提交。尽管如此，使用电子邮件类型，您可以跳过与您的电子邮件匹配的可怕正则表达式：）

查看模式属性：

例如：

<input type="email" required />

---

jquery验证将是最好的。

---

请参见此处的标准jQuery验证的演示和代码

我将需要支持旧的浏览器，所以我可能不包括HTML5只验证。我需要使用数据属性，正如我在这个特定示例的代码中所示，因此我在理想情况下是在寻找正则表达式的答案。此外，我已设法从数据属性中提取正则表达式，但我不确定如何将其与输入字段相匹配。这一点Javascript是我正在寻找的。

$('form').submit(function(){
    var isValid = true;
    $(this).find(':input').each(function(){
        var regex = new RegExp($(this).attr('data-validation-use'));
        if(!regex.exec($(this).val())){
            $('.validationError').append($(this).attr('data-validation-error'));
            $(this).addClass('invalid');
            isValid = false;
        }
    });
    return isValid;
});