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 方法大全方便学习参考
Feb 25 Javascript
潜说js对象和数组
May 25 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
使用jquery实现简单的ajax
2013/07/08 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Python编程实现正则删除命令功能
2017/08/30 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
会计专业毕业生求职信分享
2014/01/03 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
创先争优活动心得体会
2014/09/04 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
海弦WR-800F
2022/04/05 无线电