<link href="~/Scripts/validation/validationEngine.jquery.css" rel="stylesheet" /> 
<script src="~/Scripts/validation/jquery.validationEngine.js"></script> 
<script src="~/Scripts/validation/jquery.validationEngine-zh_CN.js"></script> 
<script src="~/Scripts/validation/jquery.validationEngine.js"></script>

2.HTMl：

<div class="panel panel-default"> 
 <div class="panel-heading"> 
  <div class="panel-title">常用業(yè)務字段驗證</div> 
 </div> 
 <div class="panel-body"> 
  <form role="form" id="form1" class="demoform" action="#"> 
   <div class="form-group"> 
    <label class="control-label">分類：</label> 
    <div class="select"> 
     <select class="form-control validate[required]" name="type"> 
      <option value="">==請選擇==</option> 
      <option value="1">一星級</option> 
      <option value="2">二星級</option> 
      <option value="3">三星級</option> 
     </select> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label class="control-label">多選框：</label> 
    <div> 
     <label class="checkbox-inline"> 
      <input class="validate[minCheckbox[2]]" type="checkbox" name="chb1" />一星級 
     </label> 
     <label class="checkbox-inline"> 
      <input class="validate[minCheckbox[2]]" type="checkbox" name="chb1" />二星級 
     </label> 
     <label class="checkbox-inline"> 
      <input class="validate[minCheckbox[2]]" type="checkbox" name="chb1" />三星級 
     </label> 
    </div> 
   </div> 
 
   <div class="form-group"> 
    <label class="control-label">單選框：</label> 
    <div> 
     <label class="radio-inline"> 
      <input class="validate[required]" type="radio" name="rad1" />男 
     </label> 
     <label class="radio-inline"> 
      <input class="validate[required]" type="radio" name="rad1" />女 
     </label> 
     <label class="radio-inline"> 
      <input class="validate[required]" type="radio" name="rad1" />其他 
     </label> 
    </div> 
   </div> 
 
   <div class="form-group"> 
    <label class="control-label">簡介：</label> 
    <textarea class="form-control validate[required]"></textarea> 
   </div> 
   <div class="form-group"> 
    <label class="control-label"> 
     上傳圖片： 
    </label> 
    <div > 
     <input type="file" class="form-control validate[required]" /> 
    </div> 
     
   </div> 
   <div> 
    <br /><br /> 
    <input type="submit" class="btn btn-success" value="提交" /> 
   </div> 
  </form> 
 </div> 
</div>

3.Js：

$(function () { 
 /* 
 * 特別說明： 
 * 1.對于select標簽，必須都指定value屬性，沒有可以指定空字符串 
 * 2.對于checkbox和radio驗證失敗消息，顯示在第一個按鈕附近 
 */ 
 //自定義錯誤顯示位置 
 $('.demoform').validationEngine({ 
  promptPosition: 'bottomRight', 
  addPromptClass: 'formError-white' 
 }); 
});

顯示結(jié)果：

三、Ajax后臺驗證實例：

1.后臺定義：

public JsonResult Exists(string fieldId, string fieldValue) 
{ 
 if (fieldValue.Length > 3) 
  return Json(new object[] { fieldId, true}); 
 return Json(new object[] { fieldId,false }); 
} 
public JsonResult GetInfoByCode(string fieldId, string fieldValue) 
{ 
 if (fieldValue.Length > 3) 
  return Json(new object[] { fieldId, true, "張三豐" }); 
 return Json(new object[] { fieldId, false, "驗證失敗" }); 
} 
public JsonResult GetByName(string fieldId, string fieldValue) 
{ 
 if (fieldValue.Length > 3) 
  return Json(new object[] { fieldId, true, "后臺驗證成功", new { 
   name="張三豐", 
   age=20 
  } }); 
 return Json(new object[] { fieldId, false, "驗證失敗,來自后臺的消息" }); 
}

2.ajax驗證方法擴展：

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驗證規(guī)則或其他擴展驗證規(guī)則，可以擴充在jquery.validationEngine-zh_CN.js中 
* 2.ajax后臺的返回json對象格式： 
* 返回數(shù)據(jù)內(nèi)容：[String,Boolean] 
* 第一個值類型為 String，是接收到 fieldId 的值； 
* 第二個值類型為 Boolean，驗證通過返回 true，不通過返回 false 
* 3.如果有第三個值可以作為‘消息內(nèi)容顯示', 
* 4.對于單個Ajax驗證提交，沒有提供回調(diào)處理等事件 
*/ 
//自定義錯誤顯示位置 
$('.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); 
 } 
});

顯示結(jié)果：