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 简练的几个函数
Aug 29 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
使用URL传输SESSION信息
2015/07/14 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python中的TCP socket写法示例
2018/05/11 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
查看keras的默认backend实现方式
2020/06/19 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
运动会稿件200字
2014/02/07 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
史上最牛辞职信
2015/05/13 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
小学远程教育工作总结
2015/08/13 职场文书
2016银行求职自荐信
2016/01/28 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Django使用echarts进行可视化展示的实践
2021/06/10 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL