JQuery的Validate插件的使用

最新推荐文章于 2022-04-23 16:49:23 发布

SQ_Bang

最新推荐文章于 2022-04-23 16:49:23 发布

阅读量788

点赞数

分类专栏：网页设计文章标签： jquery Validate插件插件网页表单校验的JS

本文链接：https://blog.csdn.net/SQ_Bang/article/details/51336464

版权

网页设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、简述；

Validate插件来源于JQuery，在网页端的表单对数据进行校验。不同的插件有不同的功能，这个Validate插件主要简化了前端开发人员对表单数据校验时js代码，利用插件可以提高网页开发速度，而且校验数据更加全面。

下载地址（选其一即可）

• http://plugins.jquery.com/validation/

• https://jqueryvalidation.org/

• https://github.com/jzaefferer/jquery-validation

二、如何使用

（1）本文最后会给出一个简单的使用例子。如果想校验更多的功能，请下载官网的Demo（上面已给出链接），运行起来，打开浏览器的开发人员工具查看元素可以看到详细代码。

（2）在这里简单介绍一下校验规则和校验消息：

<1>校验规则：

< 2>校验消息，可以重写为中文的：

三、使用的例子

（1）实现效果：

（2）代码目录结构

<1>jquery-1.11.1.js在下载的压缩包的dist目录下

<2>jquery.js 和jquery.validate.js在下载的压缩包的lib目录下

<3> index.html的内容如下：

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validate插件的使用</title>
<script src="js/jquery.js"></script>
<script src="js/jquery-1.11.1.js"></script> 
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
	$.validator.setDefaults({
		submitHandler: function() {
			alert("提交成功");
		}
	});

	$().ready(function() {
		$("#demoFrom").validate({
			rules: {
				username: {
					required: true,
					minlength: 2,
					maxlength: 10
				},
				password: {
					required: true,
					minlength: 6,	
					maxlength: 16		
				},
				confirm_password: {
					required: true,
					minlength: 6,
					maxlength: 16,
					equalTo: "#password"
				},			
			},
			messages: {
				username:{
					required:"用户名为必填项",
					minlength:"最小长度为2",
					maxlength:"最大长度为10"
				},
				password:{
					required:"密码为必填项",
					minlength:"最小长度为6",
					maxlength:"最大长度为16"
				},
				confirm_password: {
					required: "确认密码为必填项",
					minlength:"最小长度为6",
					maxlength:"最大长度为16",
					equalTo: "请输入和上面一样的密码"
				},
			}
		});
	});
</script>
<style type="text/css">
  #username-error,#password-error,#confirm_password-error{
		color:#F00;
	}
</style>
</head>
<body>
<!--简易表单--> 
<form id="demoFrom">
    <legend>用户登录注册校验</legend><br />
    <label for="username"> 用 户 名：</label><input type="text" name="username" id="username" /><br/>
    <label for="password"> 密    码：</label><input type="password" name="password" id="password" /><br/>
    <label for="confirm_password"> 确认密码：</label><input type="password" name="confirm_password" id="confirm_password" /><br/>
    <input type="submit" value="提交"/>
</form> 
</body>
</html>

四、总结

如果想学会一门技术，就要去他们的官网查看文档和Demo。参照官方的Demo就会知道如何使用，看看文档就知道有哪些功能可以为自己所用。这个Validate插件已经封装好的，实现不同的需求的话就要重写JS里面的rules和message。必要时还要添加自己的css布局控制。