1

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

我正在寻找与数据属性中的正则表达式值匹配并将其与相应的输入值匹配的 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>
4

2 回答 2

2

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

  1. 列表项使用输入类型电子邮件作为用户名字段。浏览器将负责验证。
  2. 使用属性required。浏览器不会让用户在字段中没有值的情况下提交。
  3. 使用属性模式。浏览器不会让用户在没有匹配给定模式的值的情况下提交。尽管如此，对于电子邮件类型，您可以跳过可怕的正则表达式匹配电子邮件:)

查看模式属性： 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;
});
于 2011-12-20T12:20:53.863 回答
0

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

于 2011-12-20T12:36:51.690 回答