<!DOCTYPE html>
<html>
<head>
<title>jQuery Validate Unobtrusive</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"
type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"
type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"
type="text/javascript"></script>
<style type="text/css">
body,input { font-size: 9pt; }
.input-validation-error { border: 1px solid #ff0000 }
.input-validation-valid { border: 1px solid #00ff00 }
.field-validation-error { color: #ff0000 }
.field-validation-valid { display: none }
.validation-summary-errors { font-weight: bold; color: #ff0000 }
.validation-summary-valid { display: none }
</style>
</head>
<body>
<form id="form1" method="get">
<div data-valmsg-summary="true"><ul></ul></div>
<div>
<input type="text" id="tReq" name="tReq" data-val="true"
data-val-required="不可空白"/>
<span data-valmsg-for="tReq"></span>
</div>
<div>
<input type="text" id="tAccept" name="tAccept" value="a.doc"
data-val="true" data-val-accept="檔名須為.jpg、.gif或.png"
data-val-accept-exts="jpg|gif|png"
/>
<span data-valmsg-for="tAccept"></span>
</div>
<div>
<input type="text" id="tRegex" name="tRegex" value="123-ABC@"
data-val="true" data-val-regex="車牌格式須為999-999"
data-val-regex-pattern="[0-9A-Z]{3}-[0-9A-Z]{3}"
/>
<span data-valmsg-for="tRegex"></span>
</div>
<div>
<input type="text" id="tDigit" name="tDigit" value="-1234"
data-val="true" data-val-digits="只接受數字字元"/>
<span data-valmsg-for="tDigit"></span>
</div>
<div>
<input type="text" id="tNum" name="tNum" value="-1,234.56A"
data-val="true" data-val-number="必須為有效數字"/>
<span data-valmsg-for="tNum"></span>
</div>
<div>
<input type="text" id="tDate" name="tDate" value="X/01/X2000"
data-val="true" data-val-date="必須為日期(僅粗略檢查)"/>
<span data-valmsg-for="tDate"></span>
</div>
<div>
<input type="text" id="tEmail" name="tEmail" value="jeffrey @mail.com"
data-val="true" data-val-email="必須為Email"/>
<span data-valmsg-for="tEmail"></span>
</div>
<div>
<input type="text" id="tUrl" name="tUrl" value="http:// blog.darkthread.net"
data-val="true" data-val-url="必須為有效網址"/>
<span data-valmsg-for="tUrl"></span>
</div>
<div>
<input type="text" id="tLen" name="tLen" value="TTT"
data-val="true" data-val-length="長度須介於4到8之間"
data-val-length-min="4" data-val-length-max="8"
/>
<span data-valmsg-for="tLen"></span>
</div>
<div>
<input type="text" id="tRange" name="tRange" value="5"
data-val="true" data-val-range="須介於10到100"
data-val-range-min="10" data-val-range-max="100"
/>
<span data-valmsg-for="tRange"></span>
</div>
<div>
<input type="text" id="tEq" name="tEq" value="99"
data-val="true" data-val-equalto="必須與上方欄位內容相同"
data-val-equalto-other="tRange"
/>
<span data-valmsg-for="tEq"></span>
</div>
<div>
<input type="submit" id="send" value="Send" />
</form>
</body>
</html>
转载地址 :http://blog.darkthread.net/post-2011-07-27-unobtrusive-jquery-validation.aspx
扫一扫
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
