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 相关文章推荐
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
杏林同学录(六)
2006/10/09 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python爬虫之百度API调用方法
2017/06/11 Python
python图像和办公文档处理总结
2019/05/28 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
毕业生自荐书
2013/12/18 职场文书
英语国培研修感言
2014/02/13 职场文书
创建文明学校实施方案
2014/03/11 职场文书
生物科学专业自荐书
2014/06/20 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年度考核工作总结
2014/12/24 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
主题班会开场白
2015/06/01 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers