jQuery验证表单插件——jquery-validation

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

——官方介绍

validation使用步骤

引入jQuery库和validation插件

如果需要官方的国际化提示信息，可以导入相应的messages_xx.js库文件。

PS：下载地址：GitHub jzaefferer/jquery-validation

选中表单元素，显式调用验证方法

<script type="text/javascript">$(function() {$("#form").validate();});
</script>

书写验证规则和消息

<script type="text/javascript">$(function() {$("#form").validate({rules:{},messages:{}});});
</script>

rules规则语法

rules:{字段名:校验器,字段名:校验器,...
}

校验器语法

校验器:值,
校验器:值,...

messages提示语法

message:{字段名:{校验器:"提示",校验器:"提示",...}字段名:{校验器:"提示",校验器:"提示",...}
}

校验器取值

校验类型	取值	描述
required	true\|false	必填字段
email	email	邮件地址
url		统一资源定位符
date	数字	日期
dateISO	字符串	日期(YYYY-MM-dd)
number		数字(负数，小数)
digits		整数
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo	jQuery表达式	两个值相同
remote	url路径	ajax校验

案例

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>$(function(){$("#registForm").validate({rules:{user:{required:true,minlength:2},password:{required:true,digits:true,minlength:6},repassword:{required:true,digits:true,minlength:6,equalTo:"[name='password']"},email:{required:true,email:true},username:{required:true,minlength:2},sex:{required:true}},messages:{user:{required:"用户名不能为空!",minlength:"用户名不得少于2个字符!"},password:{required:"密码不能为空!",digits:"密码必须是数字!",minlength:"密码长度不得低于6位!"},repassword:{required:"确认密码不能为空!",digits:"密码必须是数字!",minlength:"密码长度不得低于6位!",equalTo:"两次密码不一致!"},email:{required:"邮箱不能为空!",email:"邮箱格式不正确!"},username:{required:"姓名不能为空!",minlength:"姓名不得少于2个字符!"},sex:{required:"性别必须勾选!"}},errorElement: "label", //用来创建错误提示信息标签success: function(label) { //验证成功后的执行的回调函数//label指向上面那个错误提示信息标签labellabel.text(" ") //清空错误提示消息.addClass("success"); //加上自定义的success类}});})
</script>

jQuery验证表单插件——jquery-validation相关推荐

jquery验证表单很简单的方法
现在网上有很多jquery验证表单的插件,但都写的比较复杂.一般都有两三个文件. 我今天写一个最简单但是很实用的验证登录表单的方法. 我基本上只是给大家提供一种思路.jquery插件一般也是按这个思路 ...
Form表单插件jquery.form.js
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubm ...
jQuery插件 -- Form表单插件jquery.form.js
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...
异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
jquery验证表单提交表单
问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="te ...
关于验证表单插件Validform的用法
先说明下,这个是菜鸟教程.主要是写给自己和像我一样的菜鸟看的,高手勿喷! Validform是一个很好的表单验证插件,作者写了很多方法,我们只要直接调用就好了. 使用方法 1.写入此插件必须的css, ...
jQuery EasyUI 表单插件 - Datebox 日期框
为什么80%的码农都做不了架构师?>>> 扩展自 $.fn.combo.defaults.通过 $.fn.datebox.defaults 重写默认的 defaults. 日期 ...
JQuery表单插件Form
Form 插件简介 JQuery Form 插件是一个优秀的Ajax表单插件.它有两个核心方法 ajaxForm()和ajaxSubmit(),还包括一些方法: formToArray().formS ...
jQuery Form Plugin (jquery表单插件)
jQuery表单插件 jQuery.form 这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法: -ajaxForm -ajaxSubmit - formToArray - fo ...

jQuery验证表单插件——jquery-validation

jQuery验证表单插件——jquery-validation

validation使用步骤

引入jQuery库和validation插件

选中表单元素，显式调用验证方法

书写验证规则和消息

rules规则语法

校验器语法

messages提示语法

校验器取值

案例

jQuery验证表单插件——jquery-validation相关推荐

最新文章

热门文章