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中输入验证中一个不错的效果
Aug 21 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
图解JavaScript中的this关键字
May 28 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
使用PHP模拟HTTP认证
2006/10/09 PHP
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php中explode与split的区别介绍
2012/10/03 PHP
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python中pass语句用法实例分析
2015/04/30 Python
Python实现多线程抓取妹子图
2015/08/08 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python如何实现定时器功能
2020/05/28 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
网络程序员自荐信
2014/01/25 职场文书
三年级语文教学反思
2014/02/01 职场文书
国培远程培训感言
2014/03/08 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
铣工实训报告
2014/11/05 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Java版 单机五子棋
2022/05/04 Java/Android
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang