用了很久的jQuery但很少用Form表单，最近工作发现项目有使用这个表单验证，确实很方便，在此记录一下使用情况。
<form id="demoForm">
<input type="text" name="text1" />
<select name="select1">
<option value="">请选择</option>
<option value="1">测试选项</option>
</select>
</form>
<script>
$('#demoForm').validate({
rules: {
'text1': { required: true },
'select1': { required: true }
}
});
</script>
具体的Api可以直接参考菜鸟教程。
现在遇到一种情况，我们实际项目中肯定会开发不同业务的表单控件，比如改写select下拉框单选变成多选，不直接用select的原生控件，改写成div+css布局，这时候表单控件是隐藏的。
如果是隐藏的表单元素，以上的代码的rules它是不会起效的。
类似如下
<form id="demoForm">
<input type="text" name="text1" />
<div id="selectComponent">
<!--重写的下拉控件控件-->
</div>
<!--隐藏原来的下拉控件-->
<select type="hidden" name="select1">
<option value="">请选择</option>
<option value="1">测试选项</option>
</select>
</form>
<script>
$('#demoForm').validate({
rules: {
'text1': { required: true },
'select1': { required: true } //规则不起效
}
});
</script>
这时候需要在JS增加配置项改成如下
<script>
$('#demoForm').validate({
ignore: '',//表示不忽略所有控件，验证所有控件
rules: {
'text1': { required: true },
'select1': { required: true } //规则不起效
}
});
</script>
扩展一下ignore配置知识：
ignore: '.class1,.class2' //应该支持jQuery选择器的规则，表示需要忽略符合类名的控件
