推荐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里的验证控件就支持分组验证)。



转载于:https://www.cnblogs.com/techmango/archive/2011/05/20/Jquery_plugin_formValidator.html