jquery validate初上手-阿里云开发者社区

jquery validate初上手

2021-11-29 97

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jquery validate初上手

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

材料准备

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

下载对应的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=”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;
}