[英]How validate form data read using JSON?
我正在根據JSON數據創建表單向導。 我已經創建了一個基於JSON feed的表單，並且可以正常工作，接下來是如何將jquery validate.js合並到我的代碼中。
我在這里使用jquery.dfrom生成基於JSON示例的表單https://github.com/daffl/jquery.dform
接下來，我想在提交用戶輸入之前驗證為用戶輸入生成的表單。
如何驗證此生成的HTML表單？ 謝謝
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JSOn based form wizard jQuery dForm</title>
</head>
<style type="text/css">
input, label {
display: block;
margin-bottom: 5px;
}
</style>
<body>
<form id="demo-2-form"></form>
<!-- Load jQuery and the minified plugin -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.validate.js"></script>
<script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script>
<script type="text/javascript" class="demo" id="demo-2">
$('#demo-2-form').dform({
"action":"index.html",
"method":"post",
"html":[
{
"type":"fieldset",
"caption":"User information",
"html":[
{
"name":"email",
"caption":"Email address",
"type":"text",
"placeholder":"E.g. user@example.com",
"validate":{
"email":true
}
},
{
"name":"password",
"caption":"Password",
"type":"password",
"id":"registration-password",
"validate":{
"required":true,
"minlength":5,
"messages":{
"required":"Please enter a password",
"minlength":"At least {0} characters long"
}
}
},
{
"name":"password-repeat",
"caption":"Repeat password",
"type":"password",
"validate":{
"equalTo":"#registration-password",
"messages":{
"equalTo":"Please repeat your password"
}
}
},
{
"type":"radiobuttons",
"caption":"Sex",
"name":"sex",
"class":"labellist",
"options":{
"f":"Female",
"m":"Male"
}
},
{
"type":"checkboxes",
"name":"test",
"caption":"Receive newsletter about",
"class":"labellist",
"options":{
"updates":"Product updates",
"errors":{
"value":"security",
"caption":"Security warnings",
"checked":"checked"
}
}
}
]
},
{
"type":"fieldset",
"caption":"Address information",
"html":[
{
"name":"name",
"caption":"Your name",
"type":"text",
"placeholder":"E.g. John Doe"
},
{
"name":"address",
"caption":"Address",
"type":"text",
"validate":{ "required":true }
},
{
"name":"zip",
"caption":"ZIP code",
"type":"text",
"size":5,
"validate":{ "required":true }
},
{
"name":"city",
"caption":"City",
"type":"text",
"validate":{ "required":true }
},
{
"type":"select",
"name":"continent",
"caption":"Choose a continent",
"options":{
"america":"America",
"europe":{
"selected":"true",
"id":"europe-option",
"value":"europe",
"html":"Europe"
},
"asia":"Asia",
"africa":"Africa",
"australia":"Australia"
}
}
]
},
{
"type":"submit",
"value":"Signup"
}
]
});
</script>
</body>
</html>
我假設您是使用該插件進行驗證的，在這種情況下，您需要向表單添加類以告訴您要進行哪種驗證。 從您的代碼示例中看起來，這並不是您想要的確切庫，但是就實現而言，它應該是相似的。 將來，請確保指定這些內容-這樣的細節非常重要。
該D-型插件沒有內置的回調，所以你不知道什么時候該形式在頁面上。 這意味着由於缺少回調，任何在表單上立即運行的驗證插件都很難實現。 另一方面，如果您使用的驗證插件可以通過在表單上附加一個提交提交處理程序來工作，那么它應該通過調用它而無需對代碼進行其他更改來工作，如Kevin B在第一條評論中建議的那樣。 。
無論哪種方式，只要提交表單后以編程方式運行驗證插件，就可以了。 您應該能夠對任何像樣的插件執行此操作-我上面鏈接到的jquery驗證確實具有此功能（盡管它做得並不出色）。 您可以這樣運行它：
$('#demo-2-form').on('submit', function(e){
e.preventDefault();
if ($(this).validate().form()) {
$(this).submit();
} else {
console.log("fill your form out right man!");
}
});
這將根據您設置的參數來驗證表單，但是對於這個特定的插件來說，它並沒有帶給您很多有用的信息來標記錯誤的位置。 您可以使用其他方法來執行此操作（對於該插件，您將不得不遍歷每個字段以檢查是否存在錯誤），但是我認為這不值得在此處寫出。
確實，我還沒有遇到好的javascript驗證庫（也沒有我的同事）。 在這里自己捕獲提交並編寫驗證可能是值得的-這樣會更清楚，您可以根據需要自定義它。 此外，這些驗證中的每一個都可以用javascript一行或幾行寫出來。 這通常是我最終要做的，幾乎不需要花費更多時間。 您可以使用與上述相同的捕獲提交方法，只需將jquery validate插件行替換為幾行即可檢查您的字段並對其進行驗證。
如何使用JSON信息驗證Javascript中的表單輸入數據
[英]How to validate form input data in Javascript using JSON information
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.