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

<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'
 });
}); 

显示结果：

三、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验证方法扩展：