jquery validate初上手

骑猪看日落 2021-05-10 11:18 274阅读 0赞

**前言**：jquery validate初上手，这个标题不知道是否合适，因为之前已经在dwz中用过validate。但是，毕竟是经过zhanghuihua同学封装过的，对于bootstrap的表单验证，还需要初上手，当然这一篇是初阶的教程，先来看看怎么用。

## 材料准备 ##

现在jquery的插件官网上下载下来的没有中文的翻译包，所以我重新根据项目需要做了一个。  
[下载对应的jquery validate][jquery validate]

## 开始搞 ##

1.写一个form表单

当然这个代码不完整，你只需要注意这些内容：

*  οnsubmit=”return validateCallback(this);”
 *  class=”form-control required”

注意这两处的写法。

2.增加css

span.error { background: #f00 none repeat scroll 0 0; color: #fff; display: block; height: 21px; left: 318px; line-height: 21px; overflow: hidden; padding: 0 3px; top: 5px; }
    
    input.error, textarea.error { border-color: #f80c11 #fb7e81 #fb7e81 #f80c11; }
    
    input.focus, textarea.focus { background-color: #f8fafc; border-color: #64aabc #a9d7e3 #a9d7e3 #64aabc; }

3.当然别忘记引入包

4.写入一个这样的方法

function validateCallback(form, callback, confirmMsg) { 
        var $form = $(form);
    
        if (!$form.valid()) {
            return false;
        }
        }

## 效果 ##

![这里写图片描述][20150917150238977]

[jquery validate]: http://download.csdn.net/my
[20150917150238977]: /images/20210506/0d1c7bcaf4b244afacc7a80bc9c72e89.png