jQuery验证插件validate使用方法详解
介绍
jQuery验证插件validate是一款基于jQuery的表单验证插件。它可以很轻松地对表单进行验证操作，包括输入内容是否符合要求、是否为空等等。而且该插件的配置选项非常丰富，可以自定义提示信息、错误处理方法等等。
安装
可以通过以下两种方式进行安装：
1. 直接下载js文件放在项目中
2. 使用CDN引入
使用步骤：
- 在html页面中引入jQuery及validate.js文件
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
- 对表单进行验证设置
<form id="myForm">
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
$(function(){
$("#myForm").validate({
rules:{
username:{
required:true, //表示该字段必填
minlength:3 //最少输入3个字符
},
password:{
required:true,
minlength:6,
maxlength:12
}
},
messages:{
username:{
required:'用户名不能为空',
minlength:'用户名必须不少于3个字符'
},
password:{
required:'密码不能为空',
minlength:'密码必须不少于6个字符',
maxlength:'密码不能超过12个字符'
}
}
});
});
- 验证结果
在表单提交前，会对表单进行验证，如果有错误信息则提示错误信息，可以通过validate对象中的valid()方法来判断表单中的数据是否符合设定的规则：
$('#submitButton').on('click',function(){
if($("#myForm").valid()){ //如果数据都符合规则
console.log("表单数据验证通过");
}else{ //如果数据有错误信息
console.log("表单数据验证不通过");
}
});
示例
下面以两种示例情况进行validate表单验证的详细说明。
示例一：对表单进行简单的验证
如下示例代码所示，对da表单中的两个输入框进行简单的表单验证操作。如果默认有错误信息，则使用插件默认的提示信息。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery验证插件validate使用方法详解</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<style>
.error{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<h2>jQuery验证插件validate使用方法详解</h2>
<form id="myForm">
<label for="name">姓名：</label>
<input id="name" name="name" type="text"/><br/><br/>
<label for="age">年龄：</label>
<input id="age" name="age" type="text"/><br/><br/>
<input type="submit" value="提交"/>
</form>
<script>
$(function(){
$('#myForm').validate();
});
</script>
</body>
</html>
在该示例中，我们只是简单的对name和age输入框进行了验证操作，对于错误信息使用了默认的提示方式。
示例二：自定义错误信息的提示显示
如下示例代码所示，我们自定义了一个错误信息的显示格式，让其在输入框下方以红色的字体显示。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery验证插件validate使用方法详解</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<style>
.error{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<h2>jQuery验证插件validate使用方法详解</h2>
<form id="myForm">
<label for="name">姓名：</label>
<input id="name" name="name" type="text"/><br/><br/>
<label for="age">年龄：</label>
<input id="age" name="age" type="text"/><br/><br/>
<input type="submit" value="提交"/>
</form>
<script>
$(function(){
$('#myForm').validate({
rules:{
name:{
required:true
},
age:{
required:true,
digits:true
}
},
messages:{
name:{
required:'姓名不能为空'
},
age:{
required:'年龄不能为空',
digits:'年龄必须为数字'
}
},
errorPlacement:function(error,element){
error.appendTo(element.parent());
}
});
});
</script>
</body>
</html>
在该示例中，我们自定义了两个输入框的错误信息提示，以及设置了错误信息的位置为输入框下方。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery验证插件validate使用方法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 