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;}}

效果

jquery validate初上手相关推荐

jQuery Validate 初见面
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
jQuery.validate使用必备
jQuery.validate使用必备 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,看到这篇文章写得还是不错的,转载下与大家共同分享. 一.用前必 ...
jQuery.validate使用手册，详解
jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目中早已用过,但看到这篇文章写得还是不错的,转载下与大家共同分享. 一.用前必备官方网站: ...
jquery validate使用
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bass ...
jquery validate 详解一
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...
jQuery校验 jQuery Validate 表单验证详解
官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src="../j ...
jQuery Validate
2019独角兽企业重金招聘Python工程师标准>>> 贴上链接 http://www.runoob.com/jquery/jquery-plugin-validate.html & ...
jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){if($("#form").valid()){$(& ...
jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明转载 ...

jquery validate初上手

材料准备

开始搞

效果

jquery validate初上手相关推荐

最新文章

热门文章