文档章节

jQuery的validate插件的一些使用说明

ckJava
 ckJava
发布于 2016/12/01 17:39
字数 278
阅读 6
收藏 0

基本使用

  • validate 代码如下
$(document).ready(function(){
	$("#form1").validate({
		rules: {
			username: { required: true, minlength: 6},
			password: { required: true, minlength: 6}
		},
		messages: {
			username: { required: "必填", minlength: $.validator.format("不得少于{0}字符.")},
			password: { required: "必填", minlength: $.validator.format("不得少于{0}字符.")}
		},
        errorPlacement: function(error, element) {
            element.after(error);
		},
		success: function(label) {
			alert("success");
		},
		submitHandler: function(form) {
			alert("submit");
			form.submit(); //没有这一句表单不会提交
		}
	});
});
  • 上面代码中的 username 和 password 必须对应 HTML 中验证字段的 name 属性,id 是不行的

属性分析

  • rules 和 messages 用于定义字段的验证规则和提示信息

  • success,每个字段验证通过后执行的操作,当表单元素验证成功时执行,对于同一个表单元素,由于onkeyup、onfocusout、onsubmit等事件都会触发验证,所以本方法可能会多次执行

  • submitHandler,当表单验证成功并提交时执行,存在此方法时表单只能在此方法内部执行form.submit()才能提交,可理解成它替代了表单的onsubmit方法

  • errorPlacement,用于将每个字段的错误提示追加到后面

参考

© 著作权归作者所有

共有 人打赏支持
ckJava
粉丝 1
博文 36
码字总数 14432
作品 0
杨浦
高级程序员
私信 提问
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge
05/19
0
0
前端知识 | 论jQuery如何编写插件

一. jQuery的插件机制 为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法 jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空...

海说软件
08/10
0
0
收藏几个漂亮的login页面验证

大气带JS表单验证功能的注册页面模板1 http://www.js-css.cn/a/css/template/reglogin/2014/0721/1272.html 大气带JS表单验证功能的登录页面模板2 http://www.js-css.cn/a/css/template/reg...

k_k_anna
2015/03/03
0
0
jQuery插件PrintArea实现javascript打印页面某区域功能

jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件 使用方法 一,包含文件部分 <script type="text/javascript" src="jquery.js"></script><s......

MLeo
2012/11/05
0
2

没有更多内容

加载失败,请刷新页面

加载更多

在ubuntu下选择crontab计划任务的编辑器

在ubuntu下,首次编辑crontab计划任务的时候,会提示让选择编辑器。由于对nano编辑器不是很熟悉,若是选择nova编辑的话,会有些麻烦。 可以重置编辑器,方法如下: [root@wang ~]# select-...

季书歌
32分钟前
4
0
在线BASE64加密解密、UrlEncode编码/解码、native/ascii在线转换工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
33分钟前
1
0
laravel命令

https://blog.csdn.net/aaroun/article/details/79140618

vio小黑
34分钟前
3
0
记录一个vue directive实现点击指令外部区域调用函数的方案

根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单 <div id="app" v-clock> <div class="main" v-clickoutside="handleClose"> <button @click="show = !show">点......

呵呵闯
37分钟前
3
0
Oracle一列的多行数据拼成一行显示字符

Oracle一列的多行数据拼成一行显示字符 oracle 提供了两个函数WMSYS.WM_CONCAT 和 ListAgg函数。 先介绍:WMSYS.WM_CONCAT 例: id name 1 aa 2 bb 3 cc 要的结果是"aa,bb,cc" select WMSYS...

voole
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部