2011-08-23 67 views
0

我已經閱讀了所有的jquery驗證文檔,但我仍然不清楚如何讓我自己的自定義規則驗證輸入。使用jquery驗證插件的自定義規則

HTML

<form id="myForm"> 
    <input type="text" name="firstName" class="required" /> 
    <input type="text" name="lastName" class="required" /> 
    <input type="text" name="phone" class="phone" /> 
</form> 

JQuery的/ JavaScript的

$("#myForm").validate({ 
    rules: { 
     // what do I put here so that an input with class phone is validated? 
    }, 
    messages: { 
     // what do I put here so that this message is displayed if .phone is invalid? 
    } 
}); 

從我讀過它可以建立自己的規則,使電話號碼,不僅是必需的,但它也正好10位數字,如果不是,我可以指定要顯示的消息。

以上的JS是我從文檔直接嘗試過的,但它不起作用。該字段永遠不會被驗證,並且不會顯示消息。

任何幫助表示讚賞

回答

2

你可以做這樣的事情:

rules: { 
    name1: { 
     required: true, 
     ValidCharsGeneral: true, 
     minlength: 2, 
     maxlength: 50 
    }, 
    name2: { 
     required: true, 
     ValidCharsGeneral: true, 
     minlength: 2, 
     maxlength: 50 
    } 
}, 
messages: { 
    name1: { 
     required: "This information is required", 
     minlength: "Username must be at least 6 characters long", 
     maxlength: "Username must be at most 50 characters long", 
     remote: "Username is already in use" 
    }, 
    name2:{ 
     required: "This information is required", 
     email: "Email address is not valid", 
     remote: "Email address is already in use" 
    } 
} 
+0

是id1和id2那麼我將用於輸入元素的類? – kasdega

+0

不,它應該是元素的名稱 – kleinohad

1

沒有默認的「手機」的驗證,但是附加methods.js文件包含美國和英國的手機驗證數字模式。你可以找到links to that file here

你可以運行該代碼在這裏:http://jsfiddle.net/iknowkungfoo/XCuPj/

HTML

<form id="myForm"> 
    <input type="text" name="firstName" class="required" /><br /> 
    <input type="text" name="lastName" class="required" /><br /> 
    <input type="text" name="phone" class="phoneUS digits" maxlength="10" /><br /> 
    <input type="submit" /> 
</form>

的JavaScript

$('#myForm').validate({ 
    messages: { 
     phone: "Invalid phone number, please correct this." 
    } 
});

通過類的屬性,我指定的電話領域shoudl匹配t他「phoneUS」和「數字」驗證。我還指定字段的「maxlength」爲10.然後,在JavaScript代碼中,當字段名稱電話驗證失敗時,我指定了要顯示的消息。

或者,我可以爲與手機字段相關聯的每個驗證器指定一條消息。

備用的JavaScripthttp://jsfiddle.net/iknowkungfoo/dvfJu/2/

$('#myForm').validate({ 
    messages: { 
     phone: { 
      phoneUS: "phoneUS failed", 
      digits: "digits failed" 
     } 
    } 
});

FWIW,如果使用phoneUS驗證,並指定最大長度到10,那麼就沒有房間的電話號碼的部分之間的破折號。鑑於驗證器不允許字母數字字符(破折號除外),數字驗證器是不必要的。

+0

我很欣賞答案和提示。我會檢查這一點。 – kasdega