Question

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

我正在寻找与数据属性中的正则表达式值匹配的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>

Answer 1

如果您仅针对现代浏览器进行开发，则可以使用一些不错的功能：

列出项目使用用户名字段的输入类型电子邮件。浏览器将负责验证。
使用属性 required 。浏览器不会让用户在没有字段值的情况下提交。
使用属性模式。如果没有与给定模式匹配的值，浏览器将不允许用户提交。 Altough，有了电子邮件类型，你可以跳过可怕的正则表达式匹配你的电子邮件：）

查看pattern属性： http://www.the-art-of-web.com/html/html5-form-validation/#section_6

示例：

<input type="email" required />

在这里，您可以查看最常用浏览器中对现代表单功能的支持： http://caniuse.com/#feat=forms

目前正在讨论是否可以指定错误消息并设置样式（由浏览器处理）。至于现在，我认为不可能设置验证消息的样式。如果这些消息在所有页面上相同，那么它可能更加用户友好吗？

如果您需要支持旧浏览器，则必须在每个字段上放置javascript事件处理程序，从数据属性中提取正则表达式并将其与值进行匹配。请记住，客户端验证不能替代服务器端验证 - 这只是为了方便用户。因此，HTML5验证对于那些支持它的浏览器来说可能已经足够了 - 其余的仍然需要依赖服务器端验证，而用户体验则不会那么好。

这个例子展示了它是如何完成的（我没有很好地测试过这个：o）：

$('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;
});

Answer 2

jquery验证将是最好的。请在此处查看标准jQuery验证的演示和代码。 jQuery Validation

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

2 个答案: