Jquery-Validation插件

最新推荐文章于 2024-10-13 15:15:00 发布

转载最新推荐文章于 2024-10-13 15:15:00 发布 · 77 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daydayupyxq/p/8586769.html

本文详细介绍了Jquery-Validation插件的安装步骤及使用方法。提供了两种使用方式：HTML方式和JavaScript方式，并展示了如何定义验证规则及错误提示信息。此外还介绍了如何通过JavaScript触发验证及设置默认错误提示。

1. Jquery-Validation插件

安装

首先需要安装jquery.js

官网地址：https://jqueryvalidation.org/

使用参考地址：http://www.runoob.com/jquery/jquery-plugin-validate.htmlhttp:/www.runoob.com/jquery/jquery-plugin-validate.html

使用方式

常见有两种,一种是在html中使用，另外一种是使用JavaScript调用。

使用方式一【HTML】：

使用方式二【JavaScript】

在rules内部写每个验证元素的验证规则【可能是多个】。

在messages中写每个验证规则不通过时的提示信息，否则显示默认提示信息。

推荐使用最新的html5语法for和元素匹配。如上图中的“classify-name”,全局设置了提示信息更加for属性查找并将提示信息显示在label上。

添加验证规则

事件触发表单验证

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容，

使用setDefaults()设置错误信息提示未知

$.validator.setDefaults({
    errorPlacement: function(error, element) { //错误信息显示位置
        $( element )
            .closest( "form" )
            .find( "label[for='" + element.attr( "id" ) + "']" )
            .append( error );
    },
    errorClass: "form-error",
    validClass: "form-success",
    errorElement: "span"
});

1. 触发方式可能是直接表单内部submit触发，这个时候可使用submitHandler回调处理。

2. 如果是外部函数触发的话，使用$().validate().form(); 判断是否验证通过。

转载于:https://www.cnblogs.com/daydayupyxq/p/8586769.html