jsForm - Html Form via JSON with jQuery

 
 
/* 
1 construct html form 
2 bind data to form 
3 validate form data 
4 collect data from form 
*/ 
 (function($){ 
    var controlTypes = ['textbox','password','checkbox','radio','button','combo','list','panel']; 
    $.fn.jForm = function(options){ 
        var self = this; 
        // each form  
        this.each(function(){ 
            var form = $(this); 
            var data = eval("(" +form.attr('data') + ")"); 
            //var data = window[form.attr('data')];// another way to get form data 
            var mData = mergeFormData(data); 
            mData.fields = mData.fields.sort(function(a,b){ 
                if(typeof(a.order) == 'undefined') a.order = 999; 
                if(typeof(b.order) == 'undefined') b.order = 999; 
                if(a.order > b.order) return  1; 
                if(a.order < b.order) return -1; 
                return 0; 
            }); 
            var html = buildForm(mData); 
            form.html(html); 
            validEvent(mData); 
            var valid = {data : mData,func : validForm} 
            form.submit(valid.func); 
        }); 
    };// End the Plugin  
    function mergeFormData(obj){ 
        var  result = {fields : []}; 
        $.each(controlTypes,function(i,type){ 
            if(typeof(obj[type]) != 'undefined'){ 
                $.each(obj[type],function(k,o){ 
                    o.type = type; 
                    o.id = k; 
                    result.fields.push( o ); 
                }); 
            }; 
        }); 
        return result; 
    }; 
    function buildSimpleField(obj,type){// simple tri-column field : title-main-validattion info 
        var buffer = ["<tbody><tr><td>"]; 
        if(obj.required == true) buffer.push("<span style='color:red;'>*</span>"); 
        buffer.push(obj.title); 
        buffer.push("</td><td><input type='"); 
        buffer.push(type); 
        buffer.push("' id='"); 
        buffer.push(obj.id); 
        buffer.push("' name='"); 
        buffer.push(obj.id); 
        buffer.push("' /></td><td></td></tr></tbody>"); 
        return buffer.join(''); 
    }; 
     
    function buildRadioGroup(obj){ 
     
    }; 
     
    function buildCheckBoxGroup(obj){ 
     
    }; 
     
    function buildPanel(obj){ 
        var buffer = ["<tbody><tr><td colspan='3' style='text-align:center;'>"]; 
        $.each(obj.buttons,function(i,v){ 
            buffer.push("<input type='"); 
            buffer.push(v + "' value='" + i + "' />"); 
        }); 
        buffer.push("</td></tr></tbody>"); 
        return buffer.join(''); 
    }; 
     
    function buildForm(obj){ 
        var buffer = ["<table>"]; 
        $.each(obj.fields,function(i,v){ 
            switch(v.type){ 
                case 'textbox': 
                case 'password': 
                case 'textarea': 
                    buffer.push(buildSimpleField(v,v.type)); 
                    break; 
                case 'panel': 
                    buffer.push(buildPanel(v)); 
                    break; 
            }; 
        }); 
        buffer.push("</table>"); 
        return buffer.join(''); 
    }; 
 
    function validEvent(obj){ 
        $.each(obj.fields,function(i,v){ 
            if(typeof(v.valid) == 'function'){ 
                $('#' +v.id).blur (function(){ 
                    var  rzt = v.valid(); 
                    if(!rzt.pass){ 
                        $('#' + v.id).parent().css('background-color','red'); 
                        $($('#' + v.id).parent().parent().parent().find('td')[2]).html(rzt.message); 
                    }else{ 
                        $($('#' + v.id).parent().parent().parent().find('td')[2]).html(rzt.message); 
                        $('#' + v.id).parent().css('background-color',''); 
                    } 
                }); 
            }; 
        }); 
    }; 
     
    function validForm(){ 
        $.each(this.mData,function(i,v){ 
         
        }); 
    }; 
     
    function bindForm(data,form){ 
     
    }; 
    function saveForm(form){ 
     
    }; 
    //Automatically apply to any forms with class jForm  
    $(function(){ 
        $('form.jForm').jForm();     
    }); 
 
})(jQuery);  

 
 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS Form</title> 
<link href="style/base.css" rel="stylesheet" type="text/css" /> 
</head> 
 
<body> 
<form id='form1' class='jForm' data="form1data"></form> 
<script type="text/javascript"> 
var form1data = { 
    name : "form1", 
    textbox : { 
        username : {order : 1, title : "用户名",required : true, 
            valid : function (){ 
                if($("#username").val().length <= 0) return {pass :false,message : "请输入用户名"}; 
                else return {pass : true , message : ""}; 
            }}, 
        email : {order : 1 ,title : "邮箱", required : false} 
    } 
    ,password :{ 
        password : {order : 2, title : "密码", required : true}, 
        checkpassword : {order : 3,title : "验证密码",required : true, valid : function () { 
            if($('#checkpassword').val() != $('#password').val()) return {pass : false , message : "输入的验证密码与密码不一致"}; 
            else return {pass : true , message : ""}; 
        }} 
    } 
    ,panel:{ 
        single:{ 
            order : 1000,buttons:{"确定" : "submit","重设" : "reset"} 
        } 
    } 
};  
</script> 
<script type="text/javascript" src="script/jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="script/jsform.js"></script> 
</body> 
</html>