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

开发者社区> 沉默王二> 正文

jquery validate初上手

简介: 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;
}


3.当然别忘记引入包


<script type="text/javascript" src="${ctx}/components/yunm/yunm.validate.method.js"></script>

<script type="text/javascript" src="${ctx}/components/yunm/yunm.validate.zh.js"></script>

<script type="text/javascript" src="${ctx}/components/validate/jquery.validate.js"></script>


4.写入一个这样的方法


function validateCallback(form, callback, confirmMsg) {

   var $form = $(form);


   if (!$form.valid()) {

       return false;

   }

   }


效果

image.png


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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9544 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2933 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12042 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11790 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4624 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7390 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6957 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4057 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载