jquery validation验证表单插件_网络技术_宿州市腾雀网络科技有限公司

jquery validation验证表单插件

发布时间 - 2026-01-10 22:21:53 点击率：次

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:{
  字段名:{
    校验器:"提示",
    校验器:"提示",...
  }
  字段名:{
    校验器:"提示",
    校验器:"提示",...
  }
}

校验器取值

案例

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jquery # validation # 验证表单 # jquery validation验证电话号码 # email(实例代码) # jQuery.Validate 使用笔记(jQuery Validation范例 ) # jQuery 表单验证插件formValidation实现个性化错误提示 # jQuery验证插件validation使用指南 # jQuery Validation实例代码让验证变得如此容易 # jQuery Validation插件remote验证方式的Bug解决 # Jquery Validation插件防止重复提交表单的解决方法 # Jquery validation remote 验证的缓存问题解决方 # jquery插件validation实现验证身份证号等 # 修改jQuery Validation里默认的验证方法 # 为空 # 提示信息 # 字段名 # 表单 # 下载地址 # 两次 # 自定义 # 不正确 # 回调 # 大家多多 # 清空 # 勾选 # 错误提示 # GitHub # jzaefferer # PS # gt # messages_xx # js # type

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Kloxo面板支持哪些常见的编程语言和数据库？

下一篇：thinkphp使用

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Kloxo面板支持哪些常见的编程语言和数据库？

下一篇：thinkphp使用