html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8">5
<title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title>6
<link rel="stylesheet" href="https://static.NowJava.com/assets/jquery-validation-1.14.0/demo/milk/milk.css">7
<script src="https://static.NowJava.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>8
<script src="https://static.NowJava.com/assets/jquery-validation-1.14.0/lib/jquery.mockjax.js"></script>9
<script src="https://static.NowJava.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>10
<script src="https://static.NowJava.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>11
12
<script>13
$(document).ready(function() {14
$.mockjax({15
url: "emails.action",16
response: function(settings) {17
var email = settings.data.email,18
emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"];19
this.responseText = "true";20
if ($.inArray(email, emails) !== -1) {21
this.responseText = "false";22
}23
},24
responseTime: 50025
});26
27
$.mockjax({28
url: "users.action",29
response: function(settings) {30
var user = settings.data.username,31
users = ["asdf", "Peter", "Peter2", "George"];32
this.responseText = "true";33
if ($.inArray(user, users) !== -1) {34
this.responseText = "false";35
}36
},37
responseTime: 50038
});39
40
// validate signup form on keyup and submit41
var validator = $("#signupform").validate({42
rules: {43
firstname: "required",44
lastname: "required",45
username: {46
required: true,47
minlength: 2,48
remote: "users.action"49
},50
password: {51
required: true,52
minlength: 553
},54
password_confirm: {55
required: true,56
minlength: 5,57
equalTo: "#password"58
},59
email: {60
required: true,61
email: true,62
remote: "emails.action"63
},64
dateformat: "required",65
terms: "required"66
},67
messages: {68
firstname: "Enter your firstname",69
lastname: "Enter your lastname",70
username: {71
required: "Enter a username",72
minlength: jQuery.validator.format("Enter at least {0} characters"),73
remote: jQuery.validator.format("{0} is already in use")74
},75
password: {76
required: "Provide a password",77
minlength: jQuery.validator.format("Enter at least {0} characters")78
},79
password_confirm: {80
required: "Repeat your password",81
minlength: jQuery.validator.format("Enter at least {0} characters"),82
equalTo: "Enter the same password as above"83
},84
email: {85
required: "Please enter a valid email address",86
minlength: "Please enter a valid email address",87
remote: jQuery.validator.format("{0} is already in use")88
},89
dateformat: "Choose your preferred dateformat",90
terms: " "91
},92
// the errorPlacement has to take the table layout into account93
errorPlacement: function(error, element) {94
if (element.is(":radio"))95
error.appendTo(element.parent().next().next());96
else if (element.is(":checkbox"))97
error.appendTo(element.next());98
else99
error.appendTo(element.parent().next());100
},101
// specifying a submitHandler prevents the default submit, good for the demo102
submitHandler: function() {103
alert("submitted!");104
},105
// set this class to error-labels to indicate valid fields106
success: function(label) {107
// set as text for IE108
label.html(" ").addClass("checked");109
},110
highlight: function(element, errorClass) {111
$(element).parent().next().find("." + errorClass).removeClass("checked");112
}113
});114
115
// propose username by combining first- and lastname116
$("#username").focus(function() {117
var firstname = $("#firstname").val();118
var lastname = $("#lastname").val();119
if (firstname && lastname && !this.value) {120
this.value = (firstname + "." + lastname).toLowerCase();121
}122
});123
});124
</script>125
</head>126
<body>127
<h1 id="banner"><a href="//jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>128
<div id="main">129
<div id="content">130
<div id="header">131
<div id="headerlogo">132
<img src="/try/jquery/plugins/images/milk.png" alt="Remember The Milk">133
</div>134
</div>135
<div style="clear: both;">136
<div></div>137
</div>138
<div class="content">139
<div id="signupbox">140
<div id="signuptab">141
<ul>142
<li id="signupcurrent"><a href=" ">Signup</a>143
</li>144
</ul>145
</div>146
<div id="signupwrap">147
<form id="signupform" autocomplete="off" method="get" action="">148
<table>149
<tr>150
<td class="label">151
<label id="lfirstname" for="firstname">First Name</label>152
</td>153
<td class="field">154
<input id="firstname" name="firstname" type="text" value="" maxlength="100">155
</td>156
<td class="status"></td>157
</tr>158
<tr>159
<td class="label">160
<label id="llastname" for="lastname">Last Name</label>161
</td>162
<td class="field">163
<input id="lastname" name="lastname" type="text" value="" maxlength="100">164
</td>165
<td class="status"></td>166
</tr>167
<tr>168
<td class="label">169
<label id="lusername" for="username">Username</label>170
</td>171
<td class="field">172
<input id="username" name="username" type="text" value="" maxlength="50">173
</td>174
<td class="status"></td>175
</tr>176
<tr>177
<td class="label">178
<label id="lpassword" for="password">Password</label>179
</td>180
<td class="field">181
<input id="password" name="password" type="password" maxlength="50" value="">182
</td>183
<td class="status"></td>184
</tr>185
<tr>186
<td class="label">187
<label id="lpassword_confirm" for="password_confirm">Confirm Password</label>188
</td>189
<td class="field">190
<input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="">191
</td>192
<td class="status"></td>193
</tr>194
<tr>195
<td class="label">196
<label id="lemail" for="email">Email Address</label>197
</td>198
<td class="field">199
<input id="email" name="email" type="text" value="" maxlength="150">200
</td>201
<td class="status"></td>202
</tr>203
<tr>204
<td class="label">205
<label>Which Looks Right</label>206
</td>207
<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">208
<table>209
<tbody>210
<tr>211
<td style="padding-right: 5px;">212
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java