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. PHP函数相关知识点

    回调函数 <?php function myfunc($funcname,$name) { $name = "喜欢".$name; $funcname($name); } f ...

  2. Bootstrap-轮播图-No.7

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. HDU 6049 - Sdjpx Is Happy | 2017 Multi-University Training Contest 2

    思路来源于 FXXL - - 一个比较奇怪的地方就是第三步可以不做,也就是ans至少为1,听说场内有提问的,然后 admin 说可以不做- - (wa的我心烦) /* HDU 6049 - Sdjpx ...

  4. 解决document.getElementById("")在IE7中误读成name的bug

    <!DOCTYPE html>      <html lang="en">      <head>          <meta char ...

  5. Laravel 项目中事件控制的体会－－综合应用 trait 多态

    1 我们想像有这样的需求 1.1 应用中有两个类.其一是 荣誉(Honour)其一是 档案(Archive)Honour 和 Arhcive 是多态关联.即拥有档案属性的不只荣誉类,还有更多的类去关联 ...

  6. Non-standard serial port baud rate setting

    ////combuad_recv.cpp #include <stdio.h> /*标准输入输出定义*/ #include <stdlib.h> /*标准函数库定义*/ #in ...

  7. （十八）链接数据库，QSqlTableModel

    QMYSQL——mysql QSQLITE——sqlite QOICQ——orcale 所需头文件 .pro增加 sql #include <QSqlDatabase> #include ...

  8. 【csp模拟赛5】限制 （restrict.cpp）--数学

    自己看吧: 爆搜代码: //春水初涨-春林初盛-春风十里-不如你 //----hzwer // 这是啥子题,读不懂-- //题意有问题 -- #include<iostream> #inc ...

  9. Codeforces 915E. Physical Education Lessons（动态开点线段树）

    E. Physical Education Lessons 题目:一段长度为n的区间初始全为1,每次成段赋值0或1,求每次操作后的区间总和.(n<=1e9,q<=3e5) 题意:用线段树做 ...

  10. vs2017中信号与槽连接

    在vs2012里和在Qt Creator里添加信号和槽不一样,这里把两种环境下怎么添加详细说明一下 1.在vs2012里添加信号和槽 新建一个qt的项目QtDemo 在qtdeom.h里添加槽 pri ...