jQuery表单校验插件validator使用方法详解

2020-05-29 07:26:44易采站长站整理

validator插件:将jquery实现的常用操作进行封装,我们只需要学会插件的使用语法,就可以使用简单的代码实现较为复杂的功能。

validator的基本使用

1. 需要引入的文件

① jQuery类库

② 插件的js文件 官网

2.表单校验插件validator的基本语法

在rules中通过校验规则名称使用校验规则 ,在messages中定义该规则对应的错误提示信息。


<!-- 需要引入的文件 -->
<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>

<!-- 表单校验插件validator的基本语法 -->
<script>
$("form表单的选择器").validate({
rules:{//配置表单项校验的规则
表单项的name:{
校验规则名称: 规则值,
...
校验规则名称: 规则值
},
...,
表单项的name:{
校验规则名称: 规则值,
...
校验规则名称: 规则值
}
},
messages:{//配置对应的表单项校验失败后的错误提示信息
表单项的name:{
校验规则名称: "提示信息",
...
校验规则名称: "提示信息"
},
...,
表单项的name:{
校验规则名称: "提示信息",
...
校验规则名称: "提示信息"
}
}
});
</script>

常用的校验规则名称,规则值及使用范围:

注:$(“form表单的选择器”)即表单jQuery对象。

扩展:当错误提示信息不按照我们预想的位置显示时,我们可以自定义错误显示标签放在我们需要显示的位置。

语法:


//标签写在什么地方,错误信息就显示在什么地方
<label class="error" for="表单项的name"></label>

3. 自定义校验方法

如果预定义的校验规则不能满足需求则可以进行自定义校验规则。

自定义校验语法:


$.validator.addMethod("校验规则名称",function(value, element, params){
//value:要校验的值(校验组件的value值)
//element:要校验的表单项标签对象
//params:使用此规则时,配置的规则的值。(校验规则的参数)
//如果校验通过,就返回true;否则返回false
}, "默认效验错误时的提示信息");

validator表单校验的简单示例


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
table {