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 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
详解vue中axios的封装
2018/07/18 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python自动发微信监控报警
2019/09/06 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
迟到检讨书900字
2014/01/14 职场文书
维修工先进事迹
2014/05/29 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
社区文明倡议书
2015/04/28 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android