JQuery.validationEngine表单验证插件(推荐)

3.HTML定义：

<div class="panel panel-default">
 <div class="panel-heading">
  <div class="panel-title">Ajax后台验证</div>
 </div>
 <div class="panel-body">
  <form role="form" id="form1" class="demoform" action="#">
   <div class="form-group">
    <label class="control-label">昵称：</label>
    <input class="form-control validate[required,ajax[ajaxNickName]]" name="nickname" />
   </div>
   <div class="form-group">
    <label class="control-label">编号：</label>
    <input class="form-control validate[required,ajax[ajaxCode]]" name="code" value="12" />
   </div>
   <div class="form-group">
    <label class="control-label">编号：</label>
    <input class="form-control validate[required,ajax[ajaxName]]" name="code" value="12" />
   </div>
   <div>
    <input type="submit" class="btn btn-success" value="提交" />
   </div>
  </form>
 </div>
</div> 

4.JS

/*
* 特别说明：
* 1.ajax验证规则或其他扩展验证规则，可以扩充在jquery.validationEngine-zh_CN.js中
* 2.ajax后台的返回json对象格式：
* 返回数据内容：[String,Boolean]* 第一个值类型为 String，是接收到 fieldId 的值；
* 第二个值类型为 Boolean，验证通过返回 true，不通过返回 false
* 3.如果有第三个值可以作为‘消息内容显示',
* 4.对于单个Ajax验证提交，没有提供回调处理等事件
*/
//自定义错误显示位置
$('.demoform').validationEngine({
 promptPosition: 'bottomRight',
 //此属性，指定ajax提交表以及字段ajax验证的方式
 ajaxFormValidationMethod: 'post',
 //指定使用Ajax模式提交表单处理
 ajaxFormValidation: true,
 onAjaxFormComplete: function (status, form, json, options) {
  console.info(status);
  console.info(form);
 },
 onBeforeAjaxFormValidation: function (form, options) {
  console.info(form);
 }
}); 

显示结果：

以上所述是小编给大家介绍的JQuery.validationEngine表单验证插件(推荐)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！