在线运行代码 - 菜鸟教程

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery validation 插件 - ThemeRolldered 实例</title>
	<link rel="stylesheet" media="screen" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css">
	<style>body {
		font-size: 62.5%;
	}
	label {
		display: inline-block;
		width: 100px;
	}
	legend {
		padding: 0.5em;
	}
	fieldset fieldset label {
		display: block;
	}
	#commentForm {
		width: 500px;
	}
	#commentForm label {
		width: 250px;
	}
	#commentForm label.error, #commentForm button.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;
	}
	</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
	<fieldset class="ui-widget ui-widget-content ui-corner-all">
		<legend class="ui-widget ui-widget-header ui-corner-all">请提供您的名字、电子邮件地址（不会被公布）和评论</legend>
		<p>
			<label for="cname">请提供您的名字、电子邮件地址（不会被公布）和评论</label>
			<input id="cname" name="name" class="ui-widget-content" minlength="2" required type="text">
			<p>
				<label for="cemail">E-Mail（必填）</label>
				<input id="cemail" name="email" class="ui-widget-content" type="email" required>
			</p>
			<p>
				<label for="curl">E-Mail（必填）</label>
				<input id="curl" name="url" class="ui-widget-content" value="" type="url">
			</p>
			<p>
				<label for="ccomment">您的评论（必填）</label>
				<textarea id="ccomment" name="comment" class="ui-widget-content" required>
源代码

动行结果
