两个代码都相同，唯一的区别是一个在母版页中，另一个不在。
我只想知道当我们在 jquery 函数调用和嵌入中将页面转换为母版页时我需要对代码进行哪些更改
这里 workign 意味着我可以在页面中看到 css 效果，并且调用 Javascrpt 验证这不起作用（内容页面）
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm2.aspx.vb" Inherits="JqueryTest.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<%--<link rel="stylesheet" href='<%=Page.ResolveUrl("./JQuery/validationEngine.jquery.css")%>' type="text/css" />
<link rel="stylesheet" href='<%=Page.ResolveUrl("./JQuery/template.css")%>' type="text/css") />
<script src='<%=Page.ResolveUrl("./JQuery/jquery-1.6.min.js")%>' type="text/javascript">
</script>
<script src='<%=Page.ResolveUrl("./JQuery/jquery.validationEngine-en.js")%>' type="text/javascript"
charset="utf-8">
</script>
<script src='<%=Page.ResolveUrl("./JQuery/jquery.validationEngine.js")%>' type="text/javascript"
charset="utf-8">
</script>--%>
<link rel="stylesheet" href="./JQuery/validationEngine.jquery.css"
type="text/css" />
<link rel="stylesheet" href="./JQuery/template.css" type="text/css" />
<script src="./JQuery/jquery-1.6.min.js" type="text/javascript" >
</script>
<script src="./JQuery/jquery.validationEngine-en.js" type="text/javascript"
charset="utf-8" >
</script>
<script src="./JQuery/jquery.validationEngine.js" type="text/javascript"
charset="utf-8" >
</script>
<script>
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
function checkHELLO(field, rules, i, options) {
if (field.val() != "HELLO") {
// this allows to use i18 for the error msgs
return options.allrules.validate2fields.alertText;
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
<a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">
Evaluate form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('validate')">Validate
sport1 select field</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('hide')">Close favorite
sport 1 prompt</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('hide')">Close all prompts
on form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('updatePromptsPosition')">
Update all prompts positions</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('showPrompt', 'This is an example', 'pass')">
Build a prompt on a div</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('hide')">Close div prompt</a>
| <a href="http://www.position-relative.net/creation/formValidator/index.html">Back
to index</a>
</p>
<p>
This demonstration shows the different validators available
<br>
</p>
<div id="test" class="test" style="width: 150px;">
This is a div element</div>
<form id="formID" class="formular" method="post">
<fieldset>
<legend>Required! </legend>
<label>
<span>Field is required : </span>
<input value="" class="validate[required] text-input" type="text" name="req" id="req">
</label>
<legend>Placeholder & required </legend>
<label>
<span>Field is required : </span>
<input value="This is a placeholder" data-validation-placeholder="This is a placeholder"
class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder">
</label>
<label>
<span>Favorite sport 1:</span>
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Favorite sport 2:</span>
<select name="sport2" id="sport2" multiple="" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<br>
validate[required]
</fieldset>
<fieldset>
<legend>Custom </legend>
<label>
<p>
Comes with many predifined regex (phone, url, ip, email..etc)</p>
<a href="http://www.position-relative.net/creation/formValidator/demos/demoRegExp.html">
[DEMO]</a>
<br>
<span>Enter a URL : </span>
<input value="http://" class="validate[required,custom[url]] text-input" type="text"
name="url" id="url">
<br>
validate[required,custom[url]]
</label>
</fieldset>
<fieldset>
<legend>Function </legend>
<label>
<span>Write 'HELLO' : </span>
<input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text"
id="lastname" name="lastname">
<br>
validate[required,funcCall[checkHELLO]]
</label>
</fieldset>
<fieldset>
<legend>Past </legend>
<label>
Checks that the value is a date in the past
<br>
<span>Please enter a date ealier than 2010/01/01</span>
<input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input"
type="text" name="past" id="past">
<br>
validate[custom[date],past[2010/01/01]]
</label>
</fieldset>
<fieldset>
<legend>Future </legend>
<label>
Checks that the value is a date in the future
<br>
<span>Please enter a date older than today's date</span>
<input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text"
name="future" id="future">
<br>
validate[custom[date],future[NOW]]
</label>
</fieldset>
<fieldset>
<legend>Group required </legend>
<label>
Checks if at least one of the input is not empty.
<br>
<br>
<span>Please enter a credit card</span>
</label>
<input value="" class="validate[groupRequired[payments]] text-input" type="text"
name="creditcard1" id="creditcard1">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a paypal acccount</label>
<input value="" class="validate[groupRequired[payments],custom[email]] text-input"
type="text" name="paypal" id="paypal">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a bank account</label>
<input value="" class="validate[groupRequired[payments],custom[integer]] text-input"
type="text" name="bank" id="bank">
<label>
<strong>OR</strong></label><br>
<label>
Please choose from select</label>
<select class="validate[groupRequired[payments]] text-input" type="text" name="bank2"
id="bank2">
<option value="">Choose a payment option</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank account</option>
</select>
</fieldset>
<fieldset>
<legend>Date Range<br>
</legend>
<label>
Checks that the start date is before the end date Please enter an end date ealier
than the start date<br>
<br>
<label for="date1">
Start Date :
</label>
<input value="9/1/2009" class="validate[dateRange[grp1]]" type="text" id="date1">
</label>
<label>
<label for="date2">
End Date :
</label>
<input value="3/18/1985" class="validate[dateRange[grp1]]" type="text" id="date2">
<br>
validate[dateRange[grp1]]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Date Time Range<br>
</legend>
<label>
Checks that the start date and time are before the end date and time Please enter
an end date ealier than the start date<br>
<br>
<label for="date1">
Start Date Time:
</label>
<input value="9/1/2009 9:30:00 PM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime1">
</label>
<label>
<label for="date2">
End Date Time:
</label>
<input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime2">
<br>
validate[dateTimeRange[grp2]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Credit Card </legend>
<label>
Checks that the credit card number is at least theoretically valid, according the
to the <a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>,
but not whether the specific card number is active with a bank, etc.
<br>
<br>
Since credit cards are often presented in different formats, spaces and hyphens
(' ','-') are simply ignored.
<br>
<br>
Examples:<br>
<ul>
<li>4111 1111 1111 1111</li>
<li>3737-321345-610004</li>
</ul>
<a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm">
More examples</a>
<br>
<input value="" class="validate[required,creditCard] text-input" type="text" name="creditcard2"
id="creditcard2">
<br>
validate[required,creditCard]
</label>
</fieldset>
<fieldset>
<legend>Checkbox </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoCheckBox.html">
[DEMO]</a>
</label>
</fieldset>
<fieldset>
<legend>Ajax </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html">
[DEMO]</a>
</label>
</fieldset>
<input class="submit" type="submit" value="Validate & Send the form!"><hr>
</form>
</asp:Content>
这是工作（正常的 ASPX 页面）
<!DOCTYPE html>
<!-- saved from url=(0081)http://www.position-relative.net/creation/formValidator/demos/demoValidators.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Validation Engine</title>
<link rel="stylesheet" href="./JQuery Validation Engine_files/validationEngine.jquery.css"
type="text/css">
<link rel="stylesheet" href="./JQuery Validation Engine_files/template.css" type="text/css">
<script src="./JQuery Validation Engine_files/jquery-1.6.min.js" type="text/javascript">
</script>
<script src="./JQuery Validation Engine_files/jquery.validationEngine-en.js" type="text/javascript"
charset="utf-8">
</script>
<script src="./JQuery Validation Engine_files/jquery.validationEngine.js" type="text/javascript"
charset="utf-8">
</script>
<script>
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
function checkHELLO(field, rules, i, options) {
if (field.val() != "HELLO") {
// this allows to use i18 for the error msgs
return options.allrules.validate2fields.alertText;
}
}
</script>
</head>
<body>
<p>
<a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">
Evaluate form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('validate')">Validate
sport1 select field</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('hide')">Close favorite
sport 1 prompt</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('hide')">Close all prompts
on form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('updatePromptsPosition')">
Update all prompts positions</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('showPrompt', 'This is an example', 'pass')">
Build a prompt on a div</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('hide')">Close div prompt</a>
| <a href="http://www.position-relative.net/creation/formValidator/index.html">Back
to index</a>
</p>
<p>
This demonstration shows the different validators available
<br>
</p>
<div id="test" class="test" style="width: 150px;">
This is a div element</div>
<form id="formID" class="formular" method="post">
<fieldset>
<legend>Required! </legend>
<label>
<span>Field is required : </span>
<input value="" class="validate[required] text-input" type="text" name="req" id="req">
</label>
<legend>Placeholder & required </legend>
<label>
<span>Field is required : </span>
<input value="This is a placeholder" data-validation-placeholder="This is a placeholder"
class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder">
</label>
<label>
<span>Favorite sport 1:</span>
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Favorite sport 2:</span>
<select name="sport2" id="sport2" multiple="" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<br>
validate[required]
</fieldset>
<fieldset>
<legend>Equals </legend>
<label>
<span>Password : </span>
<input value="karnius" class="validate[required] text-input" type="password" name="password"
id="password">
</label>
<label>
<span>Confirm password : </span>
<input value="kaniusBAD" class="validate[required,equals[password]] text-input" type="password"
name="password2" id="password2">
<br>
validate[required,equals[password]]
</label>
</fieldset>
<fieldset>
<legend>Function </legend>
<label>
<span>Write 'HELLO' : </span>
<input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text"
id="lastname" name="lastname">
<br>
validate[required,funcCall[checkHELLO]]
</label>
</fieldset>
<fieldset>
<legend>MinSize </legend>
<label>
Minimum field size
<br>
<input value="" class="validate[required,minSize[6]] text-input" type="text" name="minsize"
id="minsize">
<br>
validate[required,minSize[6]]
</label>
</fieldset>
<fieldset>
<legend>MaxSize </legend>
<label>
Maximum field size, optional
<br>
<input value="0123456789" class="validate[optional,maxSize[6]] text-input" type="text"
name="maxsize" id="maxsize">
<br>
validate[maxSize[6]]<br>
note that the field is optional - it won't fail if it has no value
</label>
</fieldset>
<fieldset>
<legend>Min </legend>
<label>
integer >= -5
<br>
<input value="-7" class="validate[required,custom[integer],min[-5]] text-input" type="text"
name="min" id="min">
<br>
validate[required,custom[integer],min[-5]]
</label>
</fieldset>
<fieldset>
<legend>Max </legend>
<label>
integer ,50]
<br>
<input value="55" class="validate[required,custom[integer],max[50]] text-input" type="text"
name="max" id="max">
<br>
validate[required,custom[integer],max[50]]
</label>
</fieldset>
<fieldset>
<legend>Past </legend>
<label>
Checks that the value is a date in the past
<br>
<span>Please enter a date ealier than 2010/01/01</span>
<input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input"
type="text" name="past" id="past">
<br>
validate[custom[date],past[2010/01/01]]
</label>
</fieldset>
<fieldset>
<legend>Future </legend>
<label>
Checks that the value is a date in the future
<br>
<span>Please enter a date older than today's date</span>
<input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text"
name="future" id="future">
<br>
validate[custom[date],future[NOW]]
</label>
</fieldset>
<fieldset>
<legend>Group required </legend>
<label>
Checks if at least one of the input is not empty.
<br>
<br>
<span>Please enter a credit card</span>
</label>
<input value="" class="validate[groupRequired[payments]] text-input" type="text"
name="creditcard1" id="creditcard1">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a paypal acccount</label>
<input value="" class="validate[groupRequired[payments],custom[email]] text-input"
type="text" name="paypal" id="paypal">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a bank account</label>
<input value="" class="validate[groupRequired[payments],custom[integer]] text-input"
type="text" name="bank" id="bank">
<label>
<strong>OR</strong></label><br>
<label>
Please choose from select</label>
<select class="validate[groupRequired[payments]] text-input" type="text" name="bank2"
id="bank2">
<option value="">Choose a payment option</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank account</option>
</select>
</fieldset>
<fieldset>
<legend>Date Range<br>
</legend>
<label>
Checks that the start date is before the end date Please enter an end date ealier
than the start date<br>
<br>
<label for="date1">
Start Date :
</label>
<input value="9/1/2009" class="validate[dateRange[grp1]]" type="text" id="date1">
</label>
<label>
<label for="date2">
End Date :
</label>
<input value="3/18/1985" class="validate[dateRange[grp1]]" type="text" id="date2">
<br>
validate[dateRange[grp1]]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Date Time Range<br>
</legend>
<label>
Checks that the start date and time are before the end date and time Please enter
an end date ealier than the start date<br>
<br>
<label for="date1">
Start Date Time:
</label>
<input value="9/1/2009 9:30:00 PM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime1">
</label>
<label>
<label for="date2">
End Date Time:
</label>
<input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime2">
<br>
validate[dateTimeRange[grp2]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Credit Card </legend>
<label>
Checks that the credit card number is at least theoretically valid, according the
to the <a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>,
but not whether the specific card number is active with a bank, etc.
<br>
<br>
Since credit cards are often presented in different formats, spaces and hyphens
(' ','-') are simply ignored.
<br>
<br>
Examples:<br>
<ul>
<li>4111 1111 1111 1111</li>
<li>3737-321345-610004</li>
</ul>
<a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm">
More examples</a>
<br>
<input value="" class="validate[required,creditCard] text-input" type="text" name="creditcard2"
id="creditcard2">
<br>
validate[required,creditCard]
</label>
</fieldset>
<fieldset>
<legend>Checkbox </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoCheckBox.html">
[DEMO]</a>
</label>
</fieldset>
<fieldset>
<legend>Ajax </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html">
[DEMO]</a>
</label>
</fieldset>
<input class="submit" type="submit" value="Validate & Send the form!"><hr>
</form>
</body>
</html>