jquery-validation是一款前端验证js插件，可以验证必填字段、邮件、URL、数字范围等，在表单中应用非常广泛。

官方网站 https://jqueryvalidation.org/

下载地址:https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.0

把页面下拉到底,选择第一个下载

引入关键JS

<script src="../lib/jquery.js"></script>

<script src="../dist/jquery.validate.js"></script>

引入中文支持JS

<script src="js/messages_zh.js"></script>

表单代码 关键:required 表示必填字段

<form class="cmxform" id="commentForm" method="get" action="">

		<fieldset>

			<legend>请提供您的姓名、电子邮件地址（不会发布）和评论</legend>

			<p>

				<label for="cname">姓名</label>

				<input id="cname" name="name" minlength="2" type="text" required>

			</p>

			<p>

				<label for="cemail">邮件地址</label>

				<input id="cemail" type="email" name="email" required>

			</p>

			<p>

				<label for="curl">URL</label>

				<input id="curl" type="url" name="url">

			</p>

			<p>

				<label for="ccomment">你的评论</label>

				<textarea id="ccomment" name="comment" required></textarea>

			</p>

			<p>

				<input class="submit" type="submit" value="提交">

			</p>

		</fieldset>

	</form>

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="utf-8">

	<title>jQuery validation plug-in - main demo</title>

	<link rel="stylesheet" href="css/screen.css">

	<script src="../lib/jquery.js"></script>

	<script src="../dist/jquery.validate.js"></script>

	<script src="js/messages_zh.js"></script>

	<script>

	$.validator.setDefaults({

		submitHandler: function() {

			alert("submitted!");

		}

	});

	$().ready(function() {

		// validate the comment form when it is submitted

		$("#commentForm").validate();

		// validate signup form on keyup and submit

		$("#signupForm").validate({

			rules: {

				firstname: "required",

				lastname: "required",

				username: {

					required: true,

					minlength: 2

				},

				password: {

					required: true,

					minlength: 5

				},

				confirm_password: {

					required: true,

					minlength: 5,

					equalTo: "#password"

				},

				email: {

					required: true,

					email: true

				},

				topic: {

					required: "#newsletter:checked",

					minlength: 2

				},

				agree: "required"

			},

			messages: {

				firstname: "Please enter your firstname",

				lastname: "Please enter your lastname",

				username: {

					required: "Please enter a username",

					minlength: "Your username must consist of at least 2 characters"

				},

				password: {

					required: "Please provide a password",

					minlength: "Your password must be at least 5 characters long"

				},

				confirm_password: {

					required: "Please provide a password",

					minlength: "Your password must be at least 5 characters long",

					equalTo: "Please enter the same password as above"

				},

				email: "Please enter a valid email address",

				agree: "Please accept our policy",

				topic: "Please select at least 2 topics"

			}

		});

		// propose username by combining first- and lastname

		$("#username").focus(function() {

			var firstname = $("#firstname").val();

			var lastname = $("#lastname").val();

			if (firstname && lastname && !this.value) {

				this.value = firstname + "." + lastname;

			}

		});

		//code to hide topic selection, disable for demo

		var newsletter = $("#newsletter");

		// newsletter topics are optional, hide at first

		var inital = newsletter.is(":checked");

		var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");

		var topicInputs = topics.find("input").attr("disabled", !inital);

		// show when newsletter is checked

		newsletter.click(function() {

			topics[this.checked ? "removeClass" : "addClass"]("gray");

			topicInputs.attr("disabled", !this.checked);

		});

	});

	</script>

	<style>

	#commentForm {

		width: 500px;

	}

	#commentForm label {

		width: 250px;

	}

	#commentForm label.error, #commentForm input.submit {

		margin-left: 253px;

	}

	#signupForm {

		width: 670px;

	}

	#signupForm label.error {

		margin-left: 10px;

		width: auto;

		display: inline;

	}

	#newsletter_topics label.error {

		display: none;

		margin-left: 103px;

	}

	#main{

	padding: 10px 10px 10px 10px;

	}

	</style>

</head>

<body>

<div id="main">

	<form class="cmxform" id="commentForm" method="get" action="">

		<fieldset>

			<legend>请提供您的姓名、电子邮件地址（不会发布）和评论</legend>

			<p>

				<label for="cname">姓名</label>

				<input id="cname" name="name" minlength="2" type="text" required>

			</p>

			<p>

				<label for="cemail">邮件地址</label>

				<input id="cemail" type="email" name="email" required>

			</p>

			<p>

				<label for="curl">URL</label>

				<input id="curl" type="url" name="url">

			</p>

			<p>

				<label for="ccomment">你的评论</label>

				<textarea id="ccomment" name="comment" required></textarea>

			</p>

			<p>

				<input class="submit" type="submit" value="提交">

			</p>

		</fieldset>

	</form>

	<div>

</body>

</html>

　　

jquery-validation JQ 表单验证的更多相关文章

  1. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  2. jQuery Validation Engine 表单验证，自定义规则验证方法

    jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...

  3. jQuery Validation Engine 表单验证

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...

  4. Validation Engine 表单验证

    前端开发仓库 » jQuery » jQuery Validation Engine 表单验证 jQuery Validation Engine 表单验证来源 功能强大的 jQuery 表单验证插件, ...

  5. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  6. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  7. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  8. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  9. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  10. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. Elasticsearch7.1中文文档-第一章-入门

    安装openjdk wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-secur ...

  2. MySql大小写配置

    新安装mysql5.7版本后,linux环境下默认是大小写敏感的.可以在客户端执行以下命令: SHOW VARIABLES LIKE '%case%' 可以看到 lower_case_table_na ...

  3. java+http文件夹上传

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  4. 人脸检测之Haar-like，Adaboost，级联(cascade)

    最新版本整理完毕,见: http://face2ai.com/MachineLearning-Haar-like-Adaboost-cascade 0:写在前面的话           写在前面的牢骚 ...

  5. 0079 Ehcache 3.x应用入门及通过JCache与Spring整合

    基本要素:版本.概念与抽象 Ehcache 3.x是一个用Java语言实现的缓存库,并且实现了 JSR107规范 Ehcache从2.x升级到3.x后,Maven依赖从 net.sf.ehcache: ...

  6. Codeforces 1009 E. Intercity Travelling（计数）

    1009 E. Intercity Travelling 题意:一段路n个点,走i千米有对应的a[i]疲劳值.但是可以选择在除终点外的其余n-1个点休息,则下一个点开始,疲劳值从a[1]开始累加.休息 ...

  7. pydub音频处理库的使用

    pydub音频处理库的使用 在使用pydub这个模块之前应确保你的libav或者FFmpeg Mac上安装libav或FFmpeg brew install libav --with-libvorbi ...

  8. Java基础_线程的使用及创建线程的三种方法

    线程:线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 进程:进 ...

  9. Windows 10 共享需要网络凭据的问题

    如果Windows在资源管理器的网络中双击其他的网络设备,提示要输入网络凭据的解决办法: 打开"网络共享中心" -> "更改高级共享设置"->&qu ...

  10. Linux设备驱动程序 之 顺序锁

    当要保护的资源很小,很简单,会频繁的被访问而且写入访问很少的且必须快速时(即读不允许让写饥饿),就可以使用顺序锁(seqlock):从本质上讲,顺序锁会允许读取者对资源的自由访问,但需要读取者检查是否 ...