首先我是webshims库的创作者（一个不再维护的polyfill）。回答你的问题：
不值得，仅为了一个项目这样做真的很难。嗯，我已经做过了，只是因为我想使用现代技术。
绝对值得！这里是原因：
在引入 webshims 并编写以下脚本后：
//polyfill forms (constraint validation) and forms-ext (date, range etc.)
$.webshims.polyfill('forms forms-ext');
您可以将您的小部件和限制条件简单地编写进您的表单中：
<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />
这将创建3个不同的小部件，并且每个小部件都有不同的配置。无需额外的JS，只需要标准化、干净和精简的代码。
DOM API也是如此。以下仅是两个示例：组合两个日期字段 和 将范围字段与日期字段组合。
在旧浏览器中可以优雅地降级，并在现代浏览器中表现良好。
特别适用于移动设备（例如iOS 5、黑莓支持日期等）。
更好的移动用户体验（更好的触摸输入UI、更好的性能、适应系统），如果您使用它：type="email"、type="number"和type="date"/type="range"
我在一家大型机构中担任开发人员，您完全正确，大多数客户和设计师都不会容忍太多差异，但我仍然想使用现代技术，这意味着Webshims库可以为您提供最好的两个世界。
填充部分
//polyfill constraint validation
$.webshims.polyfill('forms');
自定义错误气泡的用户界面：
//on DOM-ready
$(function(){
$('form').bind('firstinvalid', function(e){
//show the invalid alert for first invalid element
$.webshims.validityAlert.showFor( e.target );
//prevent browser from showing native validation message
return false;
});
});
生成以下标记：
<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert">
<span class="validity-alert">
<span class="va-arrow"><span class="va-arrow-box"></span></span>
<span class="va-box">Error message of the current field</span>
</span>
</span>
自定义无效/有效表单字段的样式：
.form-ui-invalid {
border-color: red;
}
.form-ui-valid {
border-color: green;
}
自定义有效性提示信息的文本：
<input required data-errormessage="Hey this is required!!!" />
现在的焦点是什么：
没问题：
//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', {
replaceUI: true
});
$.webshims.polyfill('forms forms-ext');
还有这里：
现在，这里是最好的部分：
//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', {
//oh, I know this is bad browser sniffing :-(
replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});
$.webshims.polyfill('forms forms-ext');
我也曾怀疑，是否真的值得通过polyfill层来代替直接使用jQuery UI。但是，在使用webshims库和HTML5之后，我立即看到了javascript代码减少了很多。不再需要验证插件。感谢Alexander创建和支持这个美妙的polyfill，webshims库。以下是在表单提交点击时进行ajax调用的示例。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script>
// set options for html5shiv
if(!window.html5){
window.html5 = {};
}
window.html5.shivMethods = false;
</script>
<script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="webshims/js-webshim/minified/polyfiller.js"></script>
<script class="example">
$.webshims.setOptions({
//we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc
waitReady: false
});
//load all polyfill features
$.webshims.polyfill('forms forms-ext');
</script>
<script type="text/javascript">
$(function(){
var frm = $('#tstForm');
frm.submit(function () {
var someDate=$('#someDate').val();
alert('someDate:'+someDate);
// you can make your ajax call here.
return false;
});
});
</script>
</head>
<body>
<form id="tstForm">
Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input>
Full Name:<input id="fullName" name="fullName" type="text" required></input>
Age:<input id="age" name="age" type="number" required min="18" max="120"></input>
<input type="submit" value="Submit"/>
</form>
</body>
</html>