本文摘要
·对于10,000元以下的外包项目，有很多表单需要提交，一般我们需要在form表单、js代码、后端代码中重复写3遍元素name值，而且在前端页面无法对输入进行验证与拦截，这样接活赚钱的效率太低了（哈哈）！
·本文将介绍一个在jquery.validation框架上二开的组件，帮助大家无脑开发
一、组件介绍
本validation组件是基于jquery.validation进行二开的，其官方网址是: jQuery Validate 官网,文档与例子的参考地址是：jQuery Validate 插件。
组件的最终效果如下图：
本组件支持的功能如下：
· 前端数据验证
· 支持字长限制、控制限制、手机号限制、邮箱地址限制等等等等
· form表单ajax提交
· 选中（多）行数据
· 搜索表格内容
· 按表头排序
· 分页【这个是服务器端分页，即时请求】
二、组件使用说明
其中，message_zh.json存放国际化资源，主要用来做中文显示；其他都是组件需要用到的资源文件。
下载好源代码后，大家可以修改index.html里面的代码来测试不同的效果，最后移植到自己的项目中就可以了。
三、组件参数详解
index.html文件内容如下：
<html>
<title>组件二 | 表单验证</title>
<!-- jquery -->
<script src="plugs/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
<!-- 前端数据验证 -->
<script src="plugs/validation/jquery.validate.min.js"></script>
<!-- form表单ajax提交支持 -->
<script src="plugs/validation/jquery.form.min.js"></script>
<!-- 前端数据验证 国际化语言包 -->
<script src="plugs/validation/i18n/messages_zh.js"></script>
<body>
<script>
$().ready(function() {
$("#commentForm").validate({
submitHandler: function(form) {
// form表单提交 会跳转到新页面
// form.submit();
// ajax提交
$(form).ajaxSubmit({
success:(data)=>{
console.log(data)
},
// 提交成功后清空表单
clearForm: true,
// 提交成功后重置表单
resetForm: true
});
},
// 验证无误 显示信息
success: function(label) {
label.text("格式正确");
}
});
// 重置表单按钮
$("#reset").click(function() {
validator.resetForm();
});
});
</script>
<form id="commentForm" method="post" action="API.php" >
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
【引入资源文件】----第4-11行，引入了必要的css、js资源，各自的作用详见注释；
【表格基本样式】----第49-72行，添加了一个form表单，必须有id值，需要设置methon、action属性，方便jq插件自动提交表单。每个input标签可以写入必要的validation限制，详情参考网站：：jQuery Validate 插件。
【引入资源文件】----第14-47行，初始化validation表单，详细配置见注释。21行是采用默认表单提交行为，24-32行是采用ajax提交行为，里面有成功回调函数、清除表单等。
本组件的源代码
