jquery validate初上手

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

材料准备

现在jquery的插件官网上下javascript百炼成仙载下来的没有中文的翻译包,所以我重新根据项目需要做了一个。

下载对应的jquery validate

开始搞

1.写一个form表单

<form role="form" class="pop_login_form" action="${ctx}/login" method="post" onsubmit="return validateCallback(this);">
    <div class="row ">
        <div class="row">
            <label class="col-md-4" style="margin-top: 10px;" for="name">用户登录</label>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2 col-md-offset-2 tr th">
                    <label for="name">账户</label>
                </div>
                <div class="col-md-5">
                    <input type="text" style="" class="form-control required" id="username" name="username" placeholder="请输入会员编号"
                        autocomplete="off">

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

nsubmit=”r前端开发工资一般多少eturn validateCallback(this);”

class=”form-control rjavascript下载equired”

注意这两处的写法。

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.当然别忘记引入包

<script type="text/javascript" src="${ctx}/co前端开发软件mponents/yunm/yunm.validate.method.js"></script>

<script type="text/javascript" src="${ctx}/components/yunm/yunm.validjavascript下载ate.zh.j前端开发sjavascript"></script>

<script type="text/javascript" src="${ctx}/components/validate/jquery.validate前端开发工资一般多少.js"&javascript下载gt;</script>

4.写入一个这样的方法

function validateCallback(form, callback, confirmMsg) {

var $form &前端开发需要学什么#061; $前端开发工程(form);

if (!前端开发工程$form.valid()) {

return false;

}

}

效果

jquery validate初上手