推荐Jquery插件——formValidator

在帮公司做一个项目的UI时，发现Designer设计好的界面元素之间没有足够的空间放置验证错误提示信息。于是，为了把这些信息放在浮动层上，我找来一个强大的 Jquery插件——formValidator。这个插件非常简单易用， 只需要简单的配置就能实现复杂的表单提交前的验证功能，错误的信息是以冒泡的方式显示的，如上图所示，是不是很酷？

下 面我们来看看它是如何使用的：

1.在class里配置！：

<form id="formID" post="myform">

 

<label>

　　<span>First name (optional)</span>

　　<input value="cedric"  class="validate[optional,funcCall[validate2fields],custom[onlyLetter],length[0,100]] text-input" type="text" name="firstname" id="firstname" />

　　</label>

　　<label>

　　<span>Last name : </span>

　　<input value=""  class="validate[required,custom[onlyLetter],funcCall[validate2fields],length[0,100]] text-input" type="text" id="lastname" name="lastname"  />

 

　　<label>

　　<span>Telephone : </span>

　　<input value="0755-31101111"  class="validate[required,custom[phone]] text-input" type="text" name="telephone"  id="telephone" />

　　</label>

</label>

</form>

2.初始化插件：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

<script>

$(document).ready(function() {

$("#formID").validationEngine()

});

</script>

 

请看演示Demo:http://www.position-relative.net/creation/formValidator/demos/demoHooks.html

P.S: 这个formValidator可以对多个表单做验证，换句话就是说，可以在一个带有多个表单的页 面中，分别为每一个表单做验证。不过很可惜，这个还不是很完美哈，它不支持分组验证。因为在asp.net页面中，只能一个表单 (Form)，而在一个表单中我们有时需 要对多个区域做分组验证(微软VS.Net里的验证控件就支持分组验证)。