jquery validation验证表单插件


Posted in Javascript onJanuary 07, 2017

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:{
  字段名:{
    校验器:"提示",
    校验器:"提示",...
  }
  字段名:{
    校验器:"提示",
    校验器:"提示",...
  }
}

校验器取值

jquery validation验证表单插件

案例

<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指向上面那个错误提示信息标签label
        label.text(" ") //清空错误提示消息
          .addClass("success"); //加上自定义的success类
      }
    });
  })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
如何提高数据访问速度
Dec 26 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
JQuery ZTree使用方法详解
Jan 07 #Javascript
jquery实现转盘抽奖功能
Jan 06 #Javascript
BootStrap3中模态对话框的使用
Jan 06 #Javascript
如何制作幻灯片(代码分享)
Jan 06 #Javascript
微信小程序 支付简单实例及注意事项
Jan 06 #Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 #Javascript
ajax异步请求详解
Jan 06 #Javascript
You might like
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
PHP实现百度人脸识别
2019/05/06 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
javascript常用功能汇总
2015/07/05 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
wxPython实现绘图小例子
2019/11/19 Python
python列表推导式操作解析
2019/11/26 Python
python实现ip地址的包含关系判断
2020/02/07 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
开工仪式策划方案
2014/05/23 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
python自动化测试之Selenium详解
2022/03/13 Python