jQuery validation 插件 - ThemeRolldered 实例

Xebcnor

工程师 (已认证)

原创分享签约作者

发表于实例源码

798

jQuery validation 插件 - ThemeRolldered 实例

实例源码：

源代码：

执行

执行中...

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery validation 插件 - ThemeRolldered 实例</title>
	<link rel="stylesheet" media="screen" href="//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>
/**代码未完, 请加载全部代码(NowJava.com).**/

编辑/阅读全部代码

执行结果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery validation 插件 - ThemeRolldered 实例</title>
	<link rel="stylesheet" media="screen" href="//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>

本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。

编辑于 2020-05-08 11:46:222020-05-08 11:46:22

实例源码

实例源码订阅