jquery validate表单验证插件的基本使用方法及功能拓展(4/5)

本篇文章主要介绍了"jquery validate表单验证插件的基本使用方法及功能拓展"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 　　在开启长篇大论之前，首先将表单验证的效果展示给大家。　 　　 　　1.点击表单项，显示帮助提示　　　　　　　　 2.鼠标离开表单项时，开始校验元素　　　 ...

　　最后还要为页面元素添加css样式。插件中有一系列默认选项：其中默认错误显示标签为label，错误样式为label.error。上面在jquery.validate.extend.js文件中，有一个success函数需要说明一下。这个函数是在校验成功的时候执行的，我们在函数中为label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示，需要对label相关样式如error,valid样式进行设计。此外我们在扩展插件功能中添加了一个class为tip的label标签，该标签仅在校验元素获得焦点时生成。为此，还需要设置label的tip样式。

　　完整的样式文件内容具体如下：

body{
    font-family: Microsoft Yahei;
    font-size: 15px;
}

fieldset{    width: 680px;    }

legend{    margin-left: 8px;    }

.item{
    height: 56px;
    line-height: 36px;
    margin: 10px;
}

.item .item-label{
    float: left;
    width: 80px;
    text-align: right;
}

.item-text{
    float: left;
    width: 244px;
    height: 16px;
    padding: 9px 25px 9px 5px;
    margin-left: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.item-select{
    float: left;
    height: 34px;
    border: 1px solid #ccc;
    margin-left: 10px;
    font-size: 14px;
    padding: 6px 0px;
}

.item-submit{
    margin-left: 88px;
}

input.error{
    border: 1px solid #E6594E;
}

input.highlight{
    border: 1px solid #7abd54;
}

label.error,label.tip{
    float: left;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    text-align: left;
    margin-left: 5px;
    padding-left: 20px;
    color: red;
    background: url('error.png') no-repeat left center;
}

label.tip{
    color: #aaa;
    background: url('tip.png') no-repeat left center;
}

label.valid{
    background: url('valid.png') no-repeat left center;
    width: 32px;
}

　　至此，表单校验的代码编写和插件的应用已经全部完成。在浏览器中运行代码，显示效果如下图：