我真的不想使用插件来验证我的表单，但由于某种原因它不起作用：
我的JS是：
function postregform() {
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
var name = $('#name').val();var email = $('#email').val();var text = $('#textarea').val(); var text2 = $('#textarea2').val();var tooln = $('#tools').val();
if (name.value=='') {
$('#error-container').delay.(200).animate({'top' : '4px'}, 400)
$('#error-container').delay(3700).animate({'top' : '-70px'}, 400);
return false;
}
if (email.value=='') {
$('#error-container2').delay(200).animate({'top' : '4px'}, 400);
$('#error-container2').delay(3700).animate({'top' : '-70px'}, 400);
return false;
}
if (! emailPattern.test(email.value)) {
$('#error-container3').delay(200).animate({'top' : '4px'}, 400);
$('#error-container3').delay(3700).animate({'top' : '-70px'}, 400);
return false;
}
if (text.value=='') {
$('#error-container4')delay(200).animate({'top' : '4px'}, 400);
$('#error-container4').delay(3700).animate({'top' : '-70px'}, 400);
return false;
}
if (text.value.length < 10) {
$('#error-container5').animate({'top' : '4px'}, 400);
$('#error-container5').delay(3700).animate({'top' : '-70px'}, 400);
return false;
}
if (text2.value.length < 10) {
$('#error-container6').delay(200).animate({'top' : '4px'}, 400);
$('#error-container6').delay(3700).animate({'top' : '-70px'}, 400);
return false;
}
if (tooln.value.length < 10) {
$('#error-container7').delay(200).animate({'top' : '4px'}, 400);
$('#error-container7').delay(3700).animate({'top' : '-70px'}, 400);
return false;
}
}
我的HTML表单：
<div id="bug_form">
<form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I35/" onSubmit="return postregform();">
<label for="yola_form_widget_I35_0"><span style="color:red;">*</span> Name</label> <br>
<input id="yola_form_widget_I35_0" class="text" id="name" name="name" type="text" value="">
<!--name="0<text>"-->
<input type="hidden" name="0<label>" value="Name">
<br><br>
<label for="yola_form_widget_I35_1"><span style="color:red;">*</span> Email</label> <br>
<input id="yola_form_widget_I35_1" class="text" id="email" name="email" type="text" value="">
<input type="hidden" name="1<label>" value="Email">
<br><br>
<label for="yola_form_widget_I35_2"><span style="color:red;">*</span> Tool with Bug</label>
<br>
<select id="yola_form_widget_I35_2" name="2<list>">
<option value="Script Encode">Script Encoder</option>
<option value="Color Picker">Color Picker</option>
<option value="Linear">Linear</option>
<option value="Text Properties">Text Properties</option>
<option value="Box Properties">Box Properties</option>
<option value="Transform Properties">Transform Properties</option>
<option value="Position Changer">Position Changer</option>
<option value="Code Previewer">Code Previewer</option>
</select>
<input type="hidden" name="2<label>" value="Tool with Bug">
<br><br>
<label for="yola_form_widget_I35_3"><span style="color:red;">*</span> Bug Description</label><br>
<textarea id="yola_form_widget_I35_3" cols="18" rows="8" id="textarea" name="textarea"></textarea>
<input type="hidden" name="3<label>" value="Bug Description">
<input type="hidden" name="redirect" value="?formI35Posted=true">
<input type="hidden" name="redirect_fail" value="?formI35PostFailed=true">
<input type="hidden" name="form_name" value="Report Bug">
<input type="hidden" name="site_name" value="YolaTools">
<input type="hidden" name="destination" value="49FVJQi6Aiw6w5NTMAH7HuUGK-JH4UzV6JUV6gTwCHYgMQ==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM=">
<p><input class="submit" type="submit" value="Submit" onSubmit="return postregform();"></p>
</form>
<span style="cursor:pointer;" onclick="bugg_out();">Close[X]</span>
</div>
<div id="request">
<form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I39/" onSubmit="return postregform(this);">
<label for="yola_form_widget_I39_0"><span style="color:red;">*</span> Name</label> <br>
<input id="yola_form_widget_I39_0" class="text" name="name" type="text" value="">
<input type="hidden" name="0<label>" value="Name">
<br><br>
<label for="yola_form_widget_I39_1"><span style="color:red;">*</span> Email</label>
<br>
<input id="yola_form_widget_I39_1" class="text" name="email" type="text" value="">
<input type="hidden" name="1<label>" value="Email">
<br> <br>
<label for="yola_form_widget_I39_2"><span style="color:red;">*</span> Tool Name</label>
<br> <input id="yola_form_widget_I39_2" class="text" id="tools" name="tooln" type="text" value="">
<input type="hidden" name="2<label>" value="Tool Name">
<br><br>
<label for="yola_form_widget_I39_3"><span style="color:red;">*</span> Tool Description</label>
<br>
<textarea id="yola_form_widget_I39_3" cols="18" rows="8" id="textarea2" name="textarea1"></textarea>
<input type="hidden" name="3<label>" value="Tool Description">
<input type="hidden" name="redirect" value="?formI39Posted=true">
<input type="hidden" name="redirect_fail" value="?formI39PostFailed=true">
<input type="hidden" name="form_name" value="">
<input type="hidden" name="site_name" value="YolaTools">
<input type="hidden" name="destination" value="rcUO3XKWbMU_mNgysHPcPO_RNeKhSrMC9HNguOCTusNvKg==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM=">
<p><input class="submit" type="submit" value="Submit"></p>
</form>
<span style="cursor:pointer;text-align:center;" onclick="reque_out();">Close[X]</span>
</div>
错误：
<!-- Start Errors -->
<div id="error-container">
<div class="error-box">
<span id="forgot" style="color:red;font-weight:bold;">Name is Required</span>
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div>
</div></div>
<div id="error-container2">
<div class="error-box">
<span id="forgot" style="color:red;font-weight:bold;">Email is Required</span>
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div>
</div></div>
<div id="error-container3">
<div class="error-box">
<span id="forgot" style="color:red;font-weight:bold;">Invalid Email</span>
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div>
</div></div>
<div id="error-container4">
<div class="error-box">
<span id="forgot" style="color:red;font-weight:bold;">Bug Description is Required</span>
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div>
</div></div>
<div id="error-container5">
<div class="error-box">
<span id="forgot" style="color:red;font-weight:bold;">Min. Lenght for Bug Description is 10</span>
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div>
</div></div>
<div id="error-container6">
<div class="error-box">
<span id="forgot" style="color:red;font-weight:bold;">Min. Lenght for Tool Description is 10</span>
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div>
</div></div>
<div id="error-container7">
<div class="error-box">
<span id="forgot" style="color:red;font-weight:bold;">Tool Name is Required</span>
<div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div>
</div></div>
<!-- End Error -->
不要忘记CSS：
.top_bottom{
color:white;
background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */
padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
}
.top_bottom:hover{
color:white;
background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #0084d1 53%, #0678d6 55%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(53%,#0084d1), color-stop(55%,#0678d6), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* W3C */
padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
}
.top_bottom:active{
color:white;
background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */
padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
}
#bug_form, #request {
position:absolute;
font-size:15px;
top:-530px;
right:463px;
border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
-webkit-border-bottom-left-radius:20px;
-o-border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-bottom-right-radius:20px;
-o-border-bottom-right-radius:20px;
padding:10px;
z-index:900;color:black;
background: #2580bc; /* Old browsers */
background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */
padding:15px;
}
#error-container, #error-container2, #error-container3, #error-container4, #error-container5, #error-container6, #error-container7 {position:fixed;top:-70px;right:36px;}
.error-box {background-color:#FFDBE0;border:2px solid red;font-size:13px;line-height:1.3em;margin:10px auto;padding:10px;position:relative;text-align:center;width:270px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 5px #888888;-webkit-box-shadow:0 0 5px #888888;box-shadow:0 0 5px #88888;}
.chat-bubble-arrow-border {border-color:transparent transparent red transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-21px;right:30px;z-index:1;}
.chat-bubble-arrow {border-color:transparent transparent #FFDBE0 transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-19px;right:30px;z-index:5;}
这段代码看起来有点疯狂，但我不喜欢使用验证插件。 请帮忙
答案 0 :(得分：1)
在不使用插件的情况下验证的最简单方法是编写一些验证正则表达式函数，如果所有条件都通过，请让进程继续...请参考下面的链接：我刚刚复制了此站点的代码并在此处发布只需访问该链接并自定义您的验证样式。 the site:
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "username", 3, 16 );
bValid = bValid && checkLength( email, "email", 6, 80 );
bValid = bValid && checkLength( password, "password", 5, 16 );
bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});