首頁 > 開發者 > 網站開發

jQuery表單驗證外掛程式——validation（實現行為和結構分離）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：user   1.3   body   sage   param   提示資訊   repeat   back   函數   

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style type="text/css">
*{
font-family: Verdana,font-size:96%;
}
label{width: 10em;float: left;}
label.error{
float: none;
color:red;
padding-left: .5em;
vertical-align: top;
}
p{clear: both;}
.submit{
margin-left: 12em;
}
em{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
/**/
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
em.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
</head>
<body>
<form method="get" action="#" id="commentForm" class="cmxForm">
<fieldset>
<legend>一個簡單的驗證帶有驗證資訊評論例子</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input type="text" name="username" size="25" id="cusername" >
</p>
<p>
<label for="cemail">電子郵箱</label><em>*</em>
<input type="text" name="email" size="25" id="cemail" >
</p>
<p>
<label for="curl">網址</label><em>*</em>
<input type="text" name="url" size="25" id="curl" >
</p>
<p>
<label for="ccomment">評論</label><em>*</em>
<textarea name="comment" cols="22" id="ccomment" ></textarea>
</p>
<p>
<label for="cvalcode">驗證碼</label><em>*</em>
<input type="text" name="valcode" size="25" value="" id="cvalcode" />7+9
</p>
<p><input type="submit" name="" value="提交" class="submit"></p>
</fieldset>
</form>
<script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.validate.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.validate.messages_cn.js"></script>
<script type="text/javascript">
/*(1)$("#commentForm").validate()方法中增加rules屬性
(2)通過每個欄位的name屬性匹配驗證規則
(3)定義驗證規則：例如：required:true,minlength:2
*/
$(function(){
$("#commentForm").validate({
　　rules: {
　　　　username:{
　　　　　　required:true,
　　　　　　minlength:2
　　　　},
　　　　email:{
　　　　　　required:true,
　　　　　　email:true
　　　　},
　　　　url:"url",
　　　　comment:"required",
　　　　valcode: {formula:"7+9"}//調用驗證規則

　　},
　　messages: {
　　　　username:{
　　　　　　required:‘請輸入你的名字‘,
　　　　　　minlength:‘請輸入至少兩個字元‘
　　　　},
　　　　email:{
　　　　　　required:‘請輸入你的email‘,
　　　　　　email:‘請輸入正確的郵箱格式‘
　　　　},
　　　　url:"請輸入正確的網址格式",
　　　　comment:"請輸入評論"
　　},
　　errorElement:"em", //用來建立錯誤提示資訊標籤
　　success: function(label){ //驗證成功後執行的回呼函數
　　//label指向上面那個錯誤提示資訊標籤em
　　label.text("").addClass(‘success‘); //清空錯誤資訊，加上自訂的class
}

});
　　//自訂一個驗證方法
　　$.validator.addMethod(
　　"formula",//驗證方法名
　　function(value,element,param){//驗證規則
　　　　return value == eval(param);
　　},
　　‘請輸入正確的數學公式計算後的結果‘ //驗證提示資訊
　　)
});
</script>
</body>
</html>

jQuery表單驗證外掛程式——validation（實現行為和結構分離）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More