jQuery插件之validation插件

2020-05-24 21:27:59易采站长站整理

前面的话

最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。本文将详细介绍validation插件

概述

jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言

作为一个标准的验证方法库,Validation拥有以下特点:

1、内置验证规则:拥有必填、数字、E-Mail、URL和信用卡号等19类内置验证规则

2、自定义验证规则:可以很方便地自定义验证规则

3、简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能

4、实时验证:可以通过keyup或blur事件触发验证

validation作为jQuery的一个插件,使用时需要同jQuery一起引入,注意要先引入jquery


<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery.validate-1.13.1.js"></script>

快速上手

validation功能强大且API众多,如果要快速上手,只要掌握常用功能即可


<form id="demoForm">
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</form>
<script>
$('#demoForm').validate({
rules:{
username:{
required: true,
minlength: 2,
maxlength: 10
},
password:{
required: true,
minlength: 2,
maxlength:10
}
}
})
</script>

上述代码主要对name为’username’和’password’这两个input控件进行了校验,这两个控件必须填写内容,且字符长度必须在2-10之间

校验规则

在快速上手的例子中,使用了required、minlength和maxlength这三个校验规则。实际上validation的校验规则有17个之多


序号 规则 描述
required:true 必须输入的字段