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 相关文章推荐
js对象与打印对象分析比较
Apr 23 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
js清空form表单中的内容示例
May 20 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
vue-video-player 断点续播的实现
Feb 01 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
.htaccess文件保护实例讲解
2011/02/06 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
详谈js模块化规范
2017/07/07 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
Python 调用Java实例详解
2017/06/02 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
大整数数相乘的问题
2012/07/22 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
委托书模板
2014/04/04 职场文书
产品设计开发计划书
2014/05/07 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers