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. sql server 遍历表成一棵树结构

    一棵树的层次结构都在一张表内,当有这样的需要的时候.. 可以这样玩: <!-- DepartmentDTO 对象对应 department表_查询sql --> <sql id=&q ...

  2. nginx与php之间的交互方式

    1.  2种方式 TCP的socket  跟 UNIX的socket 2.TCP的socket  首先进入容器然后修改nginx下的配置文件 3. 修改/usr/local/nginx/conf/ng ...

  3. 【vue】@click绑定的函数，如何同时传入事件对象和自定义参数

    知识很久不用的话,果然是容易忘的... 记记笔记,希望能加深点印象吧. [仅仅传入事件对象] html: <div id="app"> <button @clic ...

  4. PHP实现yii项目转发有哪几种方法?

    header("location: index.php"); 如果header后面有代码, 会执行, 如果不想执行, 则加上exit;或者die();等, 应该可以应用到yii项目 ...

  5. 简单理解yii事件

    https://blog.csdn.net/qq43599939/article/details/80363827  通过观察者来理解yii事件 测试 class TestController ext ...

  6. 我带旅游ERP管理系统开发的经历

    前言 不怎么会写博文的我也不知道怎么写,但是有冲动让我去记录下我做项目的经历. 项目背景 某旅行社需要一款内部业务管理系统,找了一家外包来开发但最终不是她们想要的,上线的时候很多问题,首先酒店和票务资 ...

  7. [Hihocoder] 字符串排序

    题目 http://hihocoder.com/problemset/problem/1712 题解 https://www.zybuluo.com/wsndy-xx/note/1135606

  8. ZOJ 4124 拓扑排序+思维dfs

    ZOJ - 4124Median 题目大意:有n个元素,给出m对a>b的关系,问哪个元素可能是第(n+1)/2个元素,可能的元素位置相应输出1,反之输出0 省赛都过去两周了,现在才补这题,这题感 ...

  9. deepin Linux 安装+工作学习配置

    一 安装 在官网下载 U盘安装,神舟优雅x4开机按F7,选择U盘启动. U盘安装器在下载的镜像文件中. 二 配置 升级最新系统 设置root用户密码: dawn@dawn-PC:~$ sudo pas ...

  10. Django基础之request对象

    当一个页面被请求时,django就会创建一个包含本次请求原信息的HttpRequest对象. django会将这个对象自动传递给响应的视图函数,一般视图函数约定俗成地使用request参数承接这个对象 ...