使用占位符解决方法来处理客户端验证的更好方法

Question

我正在为占位符做一个JavaScript解决方法，以便对于无法识别占位符的浏览器，我使用input / textarea值显示占位符。 但这弄乱了我在ASP.net MVC应用程序上的客户端验证。

我看到了这篇SO文章 ，我不想将其实现为：（1）我有一些使用占位符的字段，（2）我的占位符，我使用了ModelMetaDataprovider，它返回DisplayAttribute或DescriptionAttribute或字段名称（分割成单词并正确区分大小写）。

现在，我还阅读了this ，它建议使用自定义验证属性。 但是，我认为这太过分了，因为我想要的只是一个不同的客户端验证。

Answer 1

啊哈！ 我应该更好地阅读第二个链接 。 一个人建议更改jquery.validate.js来检查元素的占位符属性。 但是我认为这是一个不好的解决方案，因为升级jquery.validate.js可能会覆盖它。

但是，我发现我可以在脚本中覆盖validator方法。 所以我写了这个看起来很有效。 基本上，我复制了该方法，但添加了以下指示的行。

在我自己的验证js中，我添加了替换检查以查看该元素是否具有占位符属性，以及它是否等于占位符文本：

$.validator.addMethod(
    'required',
    function(value, element, param) {
        // check if dependency is met
        if ( !this.depend(param, element) )
            return "dependency-mismatch";
        switch( element.nodeName.toLowerCase() ) {
        case 'select':
            // could be an array for select-multiple or a string, both are fine this way
            var val = $(element).val();
            return val && val.length > 0;
        case 'input':
            if ( this.checkable(element) )
                return this.getLength(value, element) > 0;
        default:
            // REPLACED THIS:
            //return $.trim(value).length > 0;
            // WITH THIS:
            return ($.trim(value).length > 0) && (value != element.getAttribute('placeholder'));
        }
    }, '');

它似乎起作用。 并运行脚本调试，我可以看到它代替了“必需”。