使用Jquery進行表單驗證

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Validation POC</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#frm").validate({
        rules: {
            cname: {
                required: true
            },
            cemail: {
                required: true,
                email: true
            }
        },
        messages: {
            cname: "Please
    enter
    your
    name",
            cemail: {
                "Email
    is
    not
    validated"
            }
        }
    });
});
</script>
</head>
<body>
<form id="frm" action="" method="get">
 <fieldset>
   <legend>Validation POC</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email"size="25"  />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

我正在嘗試使用jquery 驗證進行表單驗證。 我正在嘗試給出自己的錯誤消息。 但是此代碼未運行。

當我嘗試

 <input type="text" id="cemail" class="required"></input>

代碼可以正常工作，但是使用此命令，我無法提供自定義錯誤消息。 如果我在上層代碼中做錯了什么，請告訴我。
編輯：我也有另一個問題，如果任何控件的驗證失敗，我想更改該控件的背景色。 而且我也想刪除默認錯誤消息。

Answer 1

cemail和cname應該作為類而不是ID添加到輸入元素。

例：

<input class="cemail" name="email" size="25"  />

Answer 2

格式應該是這樣的...

$(document).ready(function() {
    $("#frm").validate({

        rules: {
            cname: {
                required: true
            },
            cemail: {
                required: true,
                email: true
            }
        },
        messages: {
            cname: { 
                required: "Please enter your name"
            },
            cemail: {
                email: "Email is not validated"
            }
        }
    });
});

cname和cemail是input的name屬性的值。

演示

Answer 3

有2個問題，主要是您需要使用name屬性（ 而不是 id屬性），因此您的規則使用name和email ，而不是cname和cemail 。 另外， email錯誤消息周圍的{}需要刪除。 總體而言，您希望如下所示：

$("#frm").validate({
    rules: {
        name: { required: true },
        email: { required: true, email: true }
    },
    messages: {
        name: "Please enter your name",
        email: "Email is not validated"
    }
});

您可以在這里嘗試一下。

使用Jquery進行表單驗證

問題描述

3 個解決方案

解決方案1
1 2010-09-15 07:40:01

解決方案2
1 2010-09-15 08:22:27

演示

解決方案3
1 已采納 2010-09-15 09:25:07

使用Jquery進行表單驗證

問題描述

3 個解決方案

解決方案1 1 2010-09-15 07:40:01

解決方案2 1 2010-09-15 08:22:27

演示

解決方案3 1 已采納 2010-09-15 09:25:07

解決方案1
1 2010-09-15 07:40:01

解決方案2
1 2010-09-15 08:22:27

解決方案3
1 已采納 2010-09-15 09:25:07