400分求使用knockout.js建立一个输入表单以及简单功能的完整代码，急！急！急！请大神们帮助！

小弟碰到了一个十分棘手的事情，必须在今天要利用knockout.js框架建立一个表单，并且实现两个最简单的功能。小弟刚学php和javascript不久，knockout框架根本不懂，现学现卖看唯恐今天很难完成，恐怕我的工作堪忧。所以，这里恳请有这方面经验的大神能帮小弟一把，给个完整的代码框架,可供小弟模仿琢磨，尽量完成工作。小弟在这里再三感激涕零！这里只能给100分，若能提供完整代码，小弟另外赠送300分。基本情况：利用knockout.js框架建立一个基本的表单，可以通过XML文件把数据存入服务器，或者读取数据，并且实现简单功能。
XML文件的基本数据格式及代码很简单，如下：（这个数据结构只是参考）
<?xml version="1.0" encoding="ISO-8859-1"?>
<database>
<record>
<id>123</id>
<diagnosis>
<date>2012-04-09</date>
</diagnosis>
<treatment>
<subtreatment>
<date>2012-08-09</date>
<code>operationskoder</code>
</subtreatment>
</treatment>
<patient>
<assess>
<date>2012-08-10</date>
<ECOG>4</ECOG>
</assess>
........
<assess>
<date>2013-05-16</date>
<ECOG>3</ECOG>
</assess>
</patient>
</record>
</database>
想实现的功能：
1.在数据输入后，需要通过一定结构的javascript对象的形式来向服务器传输数据，能否给出一个合理、简单的javascript对象，可用于传输数据？
2.利用knockout.js框架建立一个基本的表单，可输入上面XML文件中record的各个元素值，有一个“save”的按钮，点击按钮，可以通过上面的javascript对象向服务器输入数据。
3.在这个表单上有一个标签“Registration”，可以显示静态文本，其中有<diagnosis></diagnosis>中间date的具体日期，同时还需要显示<patient></patient>中间所有<ECOG></ECOG>中最大的数字。
4.在表单中用于输入code的输入框中，对这个框中的输入进行有效性检查，所有的code必须是“AZ”这两个字母开头，后面跟4个数字，比如“AZ4658”。如果输入其他数据，则显示出错信息，并且save的按钮失效。小弟被逼的没有办法了，只能倾其所有，请大神们帮忙了。另外，因为小弟对这个knockout.js实在不懂，所以如果能在代码上加上一些简单注释，小弟将感激不尽！！！小弟这里恳求大神们帮助！感激涕零！！！
框架数据结构表单javascript

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我对 knockout 不了解哈。
1.2. Ajax .. 如果是前端向后台传输数据，还是不要使用XML。js对XML操作跨浏览器上不好弄。
3.4. 就是XML的遍历比较，还有正则的使用了
有没有大神对knockout.js的框架比较熟悉的呢？还请赐教啊！
script type="text/javascript">

function ViewModel() {

this.firstName = "Zixin";

  this.lastName = "Yin";

}

ko.applyBindings(new ViewModel());

</script>



<div>

<p data-bind="text: firstName"></p>

<p data-bind="text: lasttName"></p>

<input data-bind="value: firstName"/>

<input data-bind="value: lastName"/>

div>

<script type="text/javascript">

function ViewModel() {

this.firstName = "Zixin";

  this.lastName = "Yin";

}

ko.applyBindings(new ViewModel());

</script>



<div>

<p data-bind="text: firstName"></p>

<p data-bind="text: lasttName"></p>

<input data-bind="value: firstName"/>

<input data-bind="value: lastName"/>

div>还有两个地址可以去看看 http://www.cnblogs.com/n-pei/archive/2011/12/23/2299217.html
http://www.2cto.com/kf/201307/226971.html
谢谢楼上的。那有大神对第1点和第4点，即javascript对象和正则匹配，能否给出指导呢？似乎时常见到大神们解答这两类问题啊。
1，你自己不是也说，用xml或者json，这2中数据结构都可以自己组合成字符串，然后起个键名称发送给动态页就行了4，就用正则就行了//v的值自己通过dom对象操作获取到，如document.getElementById什么的
var v='AZ33',rx=/^AZ\d{4}$/
alert(rx.test(v))//falsev='AZ3333';
alert(rx.test(v))//true
这个框架和jquery不冲突，所以直接导入jquery就行了，他的发送数据和从服务器下载数据好像都是使用jquery的ajax的。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    function check(f) {
        if (f.name.value == '') { alert('请输入姓名！'); f.name.focus(); return false; }
        //如果AZ不区分大小写，正则改成  /^AZ\d{4}$/i
        if (!/^AZ\d{4}$/.test(f.code.value)) { alert('请输入正确的code'); f.code.focus(); return false; }        ///////////将信息组合成xml格式的字符串
        var s = "<record>";
        s += '<name>' + f.name.value + '</name>';
        s += '<code>' + f.code.value + '</code>';
        s += '<addr>' + f.addr.value + '</addr>';
        s += '<age>' + f.age.value + '</age>';
        s += '</code>';
        ///ajax提交数据        $.ajax({ url: 'xxxxxxxxxx.php', type: 'POST', data: { d: s }, dataType: 'html', complete: function (xhr) {
            if (xhr == '1') alert('保存成功！');
            else alert(xhr.responseText);
        }
        });        return false;//阻止表单提交
    }
</script>
<form onsubmit="return check(this)">
姓名：<input type="text" name="name" /><br />
code：<input type="text" name="code" /><br />
地址：<input type="text" name="addr" /><br />
年龄：<input type="text" name="age" /><br />
<input type="submit" value="提交" />
</form>
xxxxxxxxxx.php
<?php
$d=$_POST["d"];//$d就是客户端提交的xml内容了
//写数据库的代码//输出成功标志
echo "1";
die();//停止其他输出
?>
非常感谢版主的帮助。在今天事情结束后，我一定会在今天或者明天把该帖子结贴的，会依照帖子说法给100分后再赠送300分，敬请放心。在版大指导的代码基础上，我又增加了代码，增加了些功能。但运行代码后出现了很奇怪的现象，所以这里我把代码贴出来，还请各位大神和版主指正指正究竟哪里出现了问题。
下面是主体代码：
1.dataForm.php<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    function check(form) {
        //judge if the input code is correct or not with regular expression
        if (!/^AZ\d{4}$/.test(form.code.value)) {
            alert('Please input the correct code!');
            form.code.focus();
            return false;
        }    function Record(diag_date, PAD, cytology, radiology, examination, treat_date, code, assess_date, ECOG)
    {
        return {
        diag_date: diag_date,
        PAD: PAD,
        cytology: cytology,
        radiology: radiology,
        examination: examination,
        treat_date: treat_date,
        code: code,
        assess_date: assess_date,
        ECOG: ECOG
        };
    }
    function getRegis()
    {
     xmlhttp="";
     if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
       }
     else
       {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
     xmlhttp.open("GET","test.xml",false);
     xmlhttp.send();
     xmlDoc=xmlhttp.responseXML;     //var x=xmlDoc.getElementsByTagName("ECOG");
     //alert(x.length);

     document.getElementById("date_diagnosis").innerHTML=
     xmlDoc.getElementsByTagName("diag_date")[0].childNodes[0].nodeValue;     document.getElementById("high_ECOG").innerHTML=
     xmlDoc.getElementsByTagName("ECOG")[0].childNodes[0].nodeValue;        }

//integrate the data into a long string in xml format
        var s = '<\?xml version="1.0" encoding="UTF-8"\?>';
        s +='<record><diagnosis>';
        s += '<diag_date>' + form.diag_date.value + '</diag_date>';
        s +='<information>';
        s += '<PAD>' + form.PAD.value + '</PAD>';
        s += '<cytology>' + form.cytology.value + '</cytology>';
        s += '<radiology>' + form.radiology.value + '</radiology>';
        s += '<examination>' + form.examination.value + '</examination>';
        s +='</information></diagnosis><treatment><subtreatment>';
        s += '<treat_date>' + form.treat_date.value + '</treat_date>';
        s += '<code>' + form.code.value + '</code>';
        s +='</subtreatment></treatment><patient><assess>';
        s += '<assess_date>' + form.assess_date.value + '</assess_date>';
        s += '<ECOG>' + form.ECOG.value + '</ECOG>';
        s += '</assess></patient></record>';

//post the long string to any document you want, for example, here is one php document (saveDatabase.php)
        $.ajax({ url: 'saveData.php',
             type: 'POST',
             data: { d:s },
             dataType: 'html',
             success: function (result) {
            if (result != false)
            {
                alert('Succeed to save the data!');
                getRegis();
                }
            else
            {
             alert('Fail to save the data!');
                }

         }
        });

        return false;
    }
</script>
</head>
<body>
<form onsubmit="return check(this)">
<h3>Diagnosis:</h3>
date:<input type="text" name="diag_date" /><br />
PAD：<input type="text" name="PAD" /><br />
cytology:<input type="text" name="cytology" /><br />
radiology:<input type="text" name="radiology" /><br />
examination:<input type="text" name="examination" /><br /><h3>Treatment:</h3>
treat_date：<input type="text" name="treat_date" /><br />
code：<input type="text" name="code" /><br /><h3>Patient:</h3>
assess_date：<input type="text" name="assess_date" /><br />
ECOG：<input type="text" name="ECOG" /><br /><h3>Cancer Registration:</h3>
<p><b>Date of diagnosis：</b> <span id="date_diagnosis"></span><br />
<b>Highest ECOG：</b> <span id="high_ECOG"></span><br /><input type="submit" value="submit" />
</form>
</body>
</html>上面是形成表格以及一系列功能实现，然后，还有一个接受ajax传输数据的文件：
saveData.php<?php
$string=$_POST["d"];//$d就是客户端提交的xml内容了
echo file_put_contents("test.xml", $string);
exit;//停止其他输出
?>这里，我直接把ajax传输过来的数据(字符串)保存为test.xml文件。然后，考虑到我想问的问题与我的数据结构有点关系，我这里还是不厌其烦的把xml数据结构的内容再显示一遍：<?xml version="1.0" encoding="UTF-8"?>
<record>
<diagnosis>
<diag_date>2012-04-09</ diag_date >
<information>
<PAD>detail of PAD</PAD>
<cytology>detail of cytology</cytology>
<radiology>detail of ratiology</radiology>
<examination>detail of examination</examination>
</information>
</diagnosis>
<treatment>
<subtreatment>
<treat_date>2012-08-09</treat_date >
<code>operationskoder</code>
</subtreatment>
........
<subtreatment>
<treat_date >2013-05-15</treat_date >
<code>operationskoder</code>
</subtreatment>
</treatment>
<patient>
<assess>
<assess_date>2012-08-10</assess_date >
<ECOG>4</ECOG>
</assess>
........
<assess>
<assess_date >2013-05-16</assess_date >
<ECOG>3</ECOG>
</assess>
</patient>
</record>
上面代码貌似很多，其实基本精华就是版主提供的代码，我做的工作是：1.根据我的数据结构，增加了一些数据元素，修改了表格；2.我增加了一个javascript生成object的函数function Record()；3. 增加了函数function getRegis()，这个函数的功能就是在表格submit并且把数据保存成test.xml文件后，再读取这个test.xml文件，把数据元素diag_date和ECOG的值读取出来，并且在表格下方的Cancer Registration处分别显示出来(这个是需求要求如此)。函数getRegis()的代码我是主要从w3school上面临摹过来的，http://www.w3school.com.cn/xml/xml_dom.asp，1. 问题出现了：当第一次运行dataForm.php时，一切都很好，产生了test.xml文件；在返回说保存数据正常后，函数getRegis()能够读取指定的值，并正常显示。但我第二次或后面多次再重复运行时（注意：此时我在表格里输入不同的数值并submit），函数getRegis()所显示出的值永远都是第一次读取的值。似乎，这个函数一切都停留在第一次操作的情况上，这个是为什么呢？而且我还打开test.xml文件了，其中的数据确实变化了啊，怎么还出现这个情况呢？还请版大以及各位大神能一解小弟心中疑惑，这里先谢过了。到现在为止，事情完成了差不多了，离帖子开贴时的问题但还差一个小问题：在xml文件的数据结构中，其实treatment部分
<treat_date>2012-08-09</treat_date >
<code>operationskoder</code>
是会有多次重复的，这意味着，在dataForm.php文件里，这两个输入框也会多次重复：
[code=html]treat_date：<input type="text" name="treat_date" /><br />
code：<input type="text" name="code" /><br />
同样的情况还发生在assess_date和ECOG上。
2.问题来了，如果数据元素是多次重复的(比如可设定重复3次)，我该如何组合成一个字符串呢(关键是我不得不设置这些数据元素的id都是一样的，那该如何标识这些不同值呢)？随之还带来一个问题，函数getRegis()读取元素ECOG时，此时有多个该元素的值，按照要求应该取最大值（这个输入肯定是数字）。我尝试很多次用循环解决这个问题，但我用var x=xmlDoc.getElementsByTagName("ECOG")，并采用x.length值时，这个值总是1，无法得到3.按道理说，获得循环控制值，并找到节点值，应该能解决。但为什么我就得不到正确的x.length呢？版大和各位大神，小弟漂流异乡，为生活所迫，半路搞IT，说起来也是一把屌丝泪。这次遇到一个坎，我几乎把分数倾其所有，还希望各位能再指点指点小弟一把，这里先谢过了！
1，楼主使用jquery的ajax就行了，不用自己再写过ajax代码，看你的描述，浏览器用的IE，IE有get缓存，所有第二次请求并没有发出，从服务器下载新数据，可以加时间戳来放置IE的get缓存xmlhttp.open("GET", "test.xml?_dc="+new Date().getTime(), false);2，如果你的xml结构有多个ECOG节点，var x=xmlDoc.getElementsByTagName("ECOG")，那么x就是ECOG的节点集合，有多少个就会输出多少个，自己检查下xml文件的ECOG节点有几个，是不是因为1的缓存问题，导致请求的是原来的xml文件，ECOG就是一个的
真厉害！说句玩笑话，冲着你这种功底和解决问题的效率，真不知道你的公司应该出多少工资请你啊。刚才稍微试了一下，果真显示出来的值完全正确了。无话可说了，就是！我估摸着第二个问题，我应该能自己解决。就剩最后一个小问题了：
在javascript部分，我在组成字符串s时，采用版大先前使用的的form.assess_date.value，form.ECOG.value这样形式。现在我有多个assess_date和ECOG时，该如何标识按顺序标识各个值呢？难道是form.assess_date[0].value,form.assess_date[1].value,form.assess_date[2].value,...这种形式么？谢谢先啊。自己基础也不行，愧疚啊
本帖最后由 showbo 于 2013-10-29 09:53:36 编辑
版大，showbo，神人啊！
首先100分中，40分给版大，另外赠送300分，另外其他人分获60分.
结贴。