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. C# Transaction 事务处理 -环境事务

    一.TransactionScope 环境事务 static async Task TransactionScopeAsync() { using (var scope = new Transacti ...

  2. qt触摸屏隐藏鼠标指针

    方法1:运行加参数-nomouse 方法2:QWidget::setCursor(QCursor(Qt::BlankCursor) 例:this->setCursor(Qt::BlankCurr ...

  3. 题解 [51nod1274] 最长递增路径

    题面 解析 这题一眼DP啊. 然而想了半天毫无思路. 后来看题解后发现可以按边权的大小顺序DP. 将边权从小到大排序,对于权值相同的边分为一组. 设\(f[i][0]\)表示经过当前权值的边后到达\( ...

  4. HZOJ 20190819 NOIP模拟26题解

    考试过程: 照例开题,然后觉得三道题都挺难,比昨天难多了(flag×1),T1 dp?T2 数据结构? T3 dp?事实证明我是sb然后决定先搞T2,但是,woc,这题在说什么啊,我怎么看不懂题啊,连 ...

  5. 记录一：tensorflow下载安装

    1.下载Anaconda,默认选项安装 2.验证 conda --v 3.下载 tensorflow     3.1 创建环境 conda create -n tensorflow python=3. ...

  6. javascript数据结构之单链表

    下面是用javascript实现的单链表,但是在输出的时候insert方法中存在问题,chrome的console报错说不能读取空的属性,调试了很久都没有通过,先在这里存着,以后再来修改一下. //数 ...

  7. Leetcode题目226.翻转二叉树（简单）

    题目描述: 翻转一颗二叉树 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 思路分析: 1)递归,不断交换左右子树,直到 ...

  8. ubuntu下如何安装linaro工具链?

    1. 获取工具链 从此处获取,如: wget https://releases.linaro.org/components/toolchain/binaries/7.3-2018.05/aarch64 ...

  9. redis 的使用 及 配置文件解读

    redis-server命令 redis-server /usr/local/redis/conf/redis.conf #加配置文件绝对路径启动redis服务 redis-server /usr/l ...

  10. python3.6 列表推导式学习

    a=[i for i in range(1,10) if i%2==0]print(a)c=[(x,y) for x in range(5) if x%2==0 for y in range(5) i ...