详解jQuery的表单验证插件--Validation

前端之家收集整理的这篇文章主要介绍了详解jQuery的表单验证插件--Validation前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

大致介绍

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件

下载地址:

基本语法

Validate插件需要jQuery,所以我们需要在头部引入jQuery和Validate文件

他的提示信息是:

required: "这是必填字段",remote: "请修正此字段",email: "请输入有效的电子邮件地址",url: "请输入有效的网址",date: "请输入有效的日期",dateISO: "请输入有效的日期 (YYYY-MM-DD)",number: "请输入有效的数字",digits: "只能输入数字",creditcard: "请输入有效的信用卡号码",equalTo: "你的输入不相同",extension: "请输入有效的后缀",maxlength: $.validator.format("最多可以输入 {0} 个字符"),minlength: $.validator.format("最少要输入 {0} 个字符"),rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),max: $.validator.format("请输入不大于 {0} 的数值"),min: $.validator.format("请输入不小于 {0} 的数值")

第二种方式:自己写提示信息

required: true,email: true } },messages: { firstname: "请输入您的名字",lastname: "请输入您的姓氏",username: { required: "请输入用户名",minlength: "用户名必需由两个字母组成" },password: { required: "请输入密码",minlength: "密码长度不能小于 5 个字母" },confirm_password: { required: "请输入密码",minlength: "密码长度不能小于 5 个字母",equalTo: "两次密码输入不一致" },email: "请输入一个正确的邮箱",} });

效果

注意:

还有一种写验证的方式是在 class 中写,例如

required:true,minlength:2}">

但是不推荐这种写法,因为不符合样式与结构分离的要求,并且还需要自己下载一个jquery.Metadata.js文件才能够这样写

表单提交问题

可以在表单提交之前执行我们自定义代码,当我们的自定义代码执行完毕后再提交表单

可以设置validate的默认值

只验证不提交表单

错误提示信息设置

1、错误信息位置设置

errorPlacement方法是设置错误信息显示在哪,默认值是在验证元素的后面

errorClass 是设置错误信息的样式,后跟css类名

errorElement 是设置用什么标签包住错误信息,默认值是

errorLabelContainer 是设置将所有的错误信息包在一个地方

wrapper 是设置用什么标签再把上边的 errorELement 包起来

例如:

是将错误提示信息显示在验证的信息前面

效果

例如:

是将每个提示信息用标签包起来,给他们添加css名为 .commentError 的样式, 并把他们都包再一个class为 error 的div里,在用

  • 把每个提示信息包起来  

    效果

    2、错误信息样式设置

    有两种方式可以修改提示信息的样式

    第一种就是采用下载Validation时自带的样式文件

    第二种方式就是自己定义样式(当然也可以修改自带的css文件

    例如添加这样的样式:

    效果

    验证时的问题

    1、验证的元素通过

    验证的元素通过验证时如果要进行操作,可以使用 success ,他可以接受字符串或者是函数,当接受的是字符串的时候是添加样式

    例如:

    是在要验证的元素通过验证时,弹出1

    例如:

    success: "valid"

    是将css样式名为 .valid 添加到元素上

    2、验证方式

    自定义校验

    虽然Validation提供了许多验证的方式,但是有些情况还是不够用的,所以如果要添加自定义的校验方式可以使用 addMethod 方法,通常将自定义方法

    写在 additional-methods.js 中,然后要引入这个文件

  • 猜你在找的jQuery相关文章