$(".demoform").Validform({ btnSubmit: "#btn_sub", //提交按钮 btnReset: ".btn_reset", tiptype: 1, // ignoreHidden: false, dragonfly: false, tipSweep: true, label: ".label", showAllError: false, postonce: true, ajaxPost: true, datatype: { "*6-20": /^[^\s]{6,20}$/, "z2-4": /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/, "username": function(gets, obj, curform, regxp) { //参数gets是获取到的表单元素值，obj为当前表单元素，curform为当前验证的表单，regxp为内置的一些正则表达式的引用; var reg1 = /^[\w\.]{4,16}$/, reg2 = /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/; if (reg1.test(gets)) { return true; } if (reg2.test(gets)) { return true; } return false; //注意return可以返回true 或 false 或 字符串文字，true表示验证通过，返回字符串表示验证失败，字符串作为错误提示显示，返回false则用errmsg或默认的错误提示; }, "phone": function() { // 5.0 版本之后，要实现二选一的验证效果，datatype 的名称 不 需要以 "option_" 开头; } }, usePlugin: { swfupload: {}, datepicker: {}, passwordstrength: {}, jqtransform: { selector: "select,input" } }, beforeCheck: function(curform) { //在表单提交执行验证之前执行的函数，curform参数是当前表单对象。 //这里明确return false的话将不会继续执行验证操作; }, beforeSubmit: function(curform) { //在验证成功后，表单提交前执行的函数，curform参数是当前表单对象。 //这里明确return false的话表单将不会提交; }, callback: function(data) { //返回数据data是json对象，{"info":"demo info","status":"y"} //info: 输出提示信息; //status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功，"n"表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作; //你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作； //ajax遇到服务端错误时也会执行回调，这时的data是{ status:**, statusText:**, readyState:**, responseText:** }； //这里执行回调操作; //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。 } });
3.1 如何使用ajax提交数据，而不提交表单。
beforeSubmit: function (curform) { addNewAd(); return false; //这里明确return false的话表单将不会提交; }
直接在beforeSubmit中加上对应的ajax提交函数,并加上return false就可以保证表单不会被提交而执行我们的ajax函数。
3.2 tiptype
用来设置提示信息的展示方式，可用的值有：1、2、3、4和function函数，默认tiptype为1。
1代表自定义弹出框提示。
2代表侧边提示，会在当前元素的父级的next对象的子级查找显示提示信息的对象。
如果不存在就会创建
if (tiptype == 2) { if ($(this).parent().next().find(".Validform_checktip").length == 0) { $(this).parent().next().append("<span />"); $(this).siblings(".Validform_checktip").remove(); } }
3也是代表的侧边提示，不过它是会在当前元素的siblings对象中查找显示提示信息的对象
同样也是不存在就会创建
if (tiptype == 3) { if ($(this).siblings(".Validform_checktip").length == 0) { $(this).parent().append("<span />"); $(this).parent().next().find(".Validform_checktip").remove(); } }
4也是侧边显示会在当前元素的父级的next对象下查找显示提示信息的对象
还可以传入自定义函数，实现你想要的提示效果。
validform实例
【1】引入js脚本：
<link href="https://www.jb51.net/${ctx}/assets/css/validform.css" type="text/css" /> <script src="https://www.jb51.net/${ctx}/assets/js/validform_min.js"></script>
【2】html：
<form action="$https://segmentfault.com/a/1190000018426565/insert" method="post"> <div> <label>类型</label> <div> <select data-width="100%"> <option value="">--请选择--</option> <c:forEach items="${equipmentCategoryList}" var="obj"> <option value="${obj.id}" <c:if test="${obj.id eq equipment.categoryId }">selected</c:if> >${obj.name}</option> </c:forEach> </select> </div> </div> <div> <label>设备名称</label> <div> <input type="text" value="${equipment.name}"/> </div> </div> </form>
【3】js脚本：