首先引入jQuery库

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

然后编写验证表单的函数

function valid(s){
var e=s.split('&');var i=0;
while( i<e.length ){
var tmp=e[i].split('=');
var el = "#"+tmp[0];
var fv =$(el).val();
var tp = tmp[1];
$(el).next().hide();//将表单域后面的出错提示隐藏掉
if( tp == "text" ){
if( fv == "" ) {
$(el).next().show(); //若表单域为空，则显示出错提示
return false; //返回false，以下相同
}
}
if( tp == "int" ){
if( isNaN( fv ) ) {
$(el).next().show();
return false;
}
}
if( tp == "email" ){
var res = new RegExp("^([A-Za-z0-9_|-]+[.]*[A-Za-z0-9_|-]+)+@[A-Za-z0-9|-]+([.][A-Za-z0-9|-]+)*[.][A-Za-z0-9]+$","ig");
if (!res.test(fv)){
$(el).next().show();
return false;
}
}
i++;
}
}

使用方法距离：

<input size="20" type="text" name="email" id="email"  />
<span class="errormsg">E-mail is not valid</span>
<input type="password" name="password" id="password"    />
<span class="errormsg">password is required</span>
<input type="submit" value="Login" onClick="return valid('email=email&password=text')"/>

valid的参数说明，若表单域中的input或者select等等需要是email格式，则参数为xxx=email,数字格式为xxx=int,其他非空文本格式则为xxx=text,验证多个表单域用&将其连接起来，如name=text&mail=email&age=int

案例可以参见生活点滴虚拟主机的注册表单案例，当然，这个案例更加智能，但是不如本文的代码效率高和灵活，所以才有了这篇日志。

我想上面的html代码应该不用解释了吧，否则这篇文章你也没有看得必要了哈，下面是css的实现，其实css是最难搞的，目前搞定是实现目录式树形，其他树状也是很简单的，无非就是改变一下css

a:link,a:visited{font-size:12px;
color:#094477;text-decoration:none;
}
a:link:hover,a:visited:hover{
color:#000cf;text-decoration:underline;
}
ul.folder{padding:0;margin:0;list-style:none;/*重置ul的margin和padding，否则打死都无法兼容FF和IE*/}
li.folder{
background:#fff url(folderbg.png) no-repeat 0 0;padding:0px 0 0px 14px;
margin:0 2px;
text-indent:20px;
/*folder背景，目前放到是windows目录背景，如果是其他树形，用其他背景图片替代即可*/
}
li.folder-op{background:#fff url(folderbg-op.png) no-repeat 0 0;}
.disnone{
display:none;
}/*这是一个公共的css class，表示隐藏该元素*/

下面开始介绍重点，那就是js的实现，可能这个重点会让你失望，毕竟代码才那么简单的几行，当然在运用jquery之前肯定是要引入jquery库文件的，本例子中直接引用的本blog（生活点滴）中的jquery库：

下面是js代码，解释依然在注释中：
function Exp(obj){
var html_element = $(obj).parent('.folder');/*获取当前点击的父dom，在本例子中获取的dom节点将是 “第一级目录所在的li.folder”*/
var sub_element = $(html_element).children(".folder"); ;/*根据当前的父dom，获取本级的子dom*/
if( html_element.attr('class').indexOf('folder-op') != -1 ){
/*css class .folder-op表示当前已经展开的类，如果展开，则前面的+背景变成-背景，具体可以在后面的例子中看到
如果class中含有该类，则表示当前已经展开，所以下面的两行的任务是：1.隐藏该目录，2.remove掉此css class
*/
html_element.removeClass('folder-op');
sub_element.hide();
}
else{
/*否则，添加表示目录已经展开的类，展示该目录*/
html_element.addClass('folder-op');
sub_element.show(500);
}
}
对，对于js就只需要上面的几行，太简单了，对吧,下面是例子：

上面例子中包含文件有：tree-jquery！
有些细节是在css中控制的，所以如果你需要其他样式请自行修改css，如下面的另外一个例子：（例子中的虚线不完美，特别没个分支最后的那一行, 所以，在css的运用上发挥你的聪明才智吧）：

————end————————

不知道你是否注意到，上面凡是打*好的表单域，我都用了一个css属性，那就是”important”,这样的好处有两点，1.我们可以在css中将必须填写的字段用特殊的样式表来显示；2.方便在jquery中遍历，下面是jquery简单表单验证的函数

function validForm(){
var is_not_valid = false;
$("#reg input.important").each(function(i){//遍历id=reg中的class=important的表单
if(this.value.length < 1){//如果表单为空
i ++ ;//增加i
is_not_valid = true;
if( i < 2 )//因为这个遍历循环无法用break跳出，只能通过i自增的方式让js只弹出一次alert
alert('带星号的必须填写');
this.focus();
}
});
if( is_not_valid ) return false;
}

表单域太少，所以也许你看不到这个的优点何在，但是一旦不能为空的表单数量很多，优势就明显了！