javascript表单校验练习题，和正则表达式。请大家帮我做一下，实在不会，谢谢了。200分！！！
如下图：我界面写了，但是根本就不会javascript语言，请大家一定要帮我写一下javascript代码。谢谢了200分！！有两点实现需求：1：需要用RegExp.te...
如下图：我界面写了，但是根本就不会javascript语言，请大家一定要帮我写一下javascript代码。谢谢了 200分！！
有两点实现需求：
1：需要用RegExp.test( )正则表达式判断，依据为右边蓝色的描述，当每一行输入格式错误，后面的都会提示：原来的蓝色字变为红色，并且前面加这个字：“你输入错误，”。
2.下面有一个重置按钮：点击后所有输入的东西情况
谢谢了 请一定帮小弟做一下实在不会。但是又想学习。200分！
表单界面的代码，在云盘里面，请下下来，帮我写一下javascript代码谢谢了。
http://pan.baidu.com/s/1qWP8MlA 展开
有两点实现需求：
1：需要用RegExp.test( )正则表达式判断，依据为右边蓝色的描述，当每一行输入格式错误，后面的都会提示：原来的蓝色字变为红色，并且前面加这个字：“你输入错误，”。
2.下面有一个重置按钮：点击后所有输入的东西情况
谢谢了 请一定帮小弟做一下实在不会。但是又想学习。200分！
表单界面的代码，在云盘里面，请下下来，帮我写一下javascript代码谢谢了。
http://pan.baidu.com/s/1qWP8MlA 展开
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
font-family: "微软雅黑", Verdana, sans-serif, "宋体";
}
fieldset {
line-height: 30px;
width: 700px;
margin: 0 auto;
padding-left: 50px;
padding-top: 10px;
border: cornflowerblue groove 5px;
}
fieldset legend {
font-weight: bold;
margin-left: 50px;
}
fieldset input {
width: 250px;
}
fieldset input:active {
border-color: #fdb25a;
width: 252px;
height: 20px;
}
hr {
margin-right: 40px;
/*vertical-align: middle;*/
border: dashed 1px;
}
#button1 {
width: 100px;
font-size: 18px;
margin: 0 auto;
}
#reset1 {
width: 100px;
font-size: 18px;
}
#button1:hover {
width: 103px;
height: 32px;
border: solid 1px chartreuse;
background-color: #12aeef;
font-family: "微软雅黑", Verdana, sans-serif, "宋体";
color: white;
}
#reset1:hover {
width: 103px;
height: 32px;
border: solid 1px chartreuse;
background-color: #12aeef;
font-family: "微软雅黑", Verdana, sans-serif, "宋体";
color: white;
}
#text7 {
text-align: center;
}
a {
color: #0000FF;
font-size: 13px;
}
div{
margin:12px 0;
}
.font{
font-size:14px;
color:blue;
}
.error{
color:red;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend> 请输入订单信息: </legend>
<label for="text1">订单编号：</label>
<input type="text" id="text1" name="text" data-check="/^[1-9a-zA-Z_-]{6}$/"><label class="font"> <<<请输入第一位非零的六位订单号</label>
<div>
<label for="text2">客户姓名：</label>
<input type="text" id="text2" name="text" data-check="/^[\u4E00-\u9FFF]{1,12}$/"><label class="font"> <<<请输入不超过12个汉字的姓名</label>
</div>
<div>
<label for="text3">身份证号：</label>
<input type="text" id="text3" name="text" data-check="/^\d{5-18}$/"><label class="font"> <<<请输入5-18位的纯数字身份证号</label>
</div>
<div>
<label for="text4">送货地址：</label>
<input type="text" id="text4" name="text" data-check="/^\S+$/"><label class="font"> <<<送货地址必须填写</label>
</div>
<div>
<label for="text5">联系电话：</label>
<input type="text" id="text5" name="text" data-check="/^1\d{12}$/"><label class="font"> <<<请输入1开头的13位电话号码</label>
</div>
<div>
<label for="text6">电子邮件：</label>
<input type="text" id="text6" name="text" data-check="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/"><label class="font"> <<<请输入你的电子邮箱</label>
</div>
<hr />
<div id="text7">
<input type="button" id="button1" name="button" value="提交">
<input type="reset" id="reset1" name="reset" value="重置">
</div>
</fieldset>
</form>
<script type="text/javascript">
each(document.getElementsByTagName("input"), function (dom) {
var nextDom = dom.nextSibling, promptHTML = nextDom.innerHTML;
dom.onblur = function () {
if (check(dom)) {
nextDom.innerHTML = " <<<你输入正确！";
nextDom.className = "font";
} else {
nextDom.innerHTML = " <<<你输入错误！";
nextDom.className = "font error";
}
};
dom.onfocus = function () {
nextDom.innerHTML = promptHTML;
nextDom.className = "font";
}
});
function check(dom) {
var checkRegex, val;
if (checkRegex = dom.getAttribute("data-check")) {
checkRegex = eval("(" + checkRegex + ")");
val = dom.value.replace(/^ +/ig, "").replace(/ +$/ig, "");
return checkRegex.test(val);
}
return false;
}
function each(ary, callback) {
for (var i = 0; i < ary.length; i++) {
callback(ary[i], i);
}
}
</script>
</body>
</html>
更多追问追答
追问
谢谢你哈，我已经加到两百分了。我测试了下，为了尽量完美一点，还有几个小问题和实现问题，需要你帮我在稍微修改一下，可能我的要求有点复杂，但是没一点点都能表单校验中提升客户体验，我很想把这些都学到，有些强迫症，请你帮我完成下，可能会增加很多代码，如果200分不够，给我说下，我在开一个问题，然后加分采纳-由于字数限制问题我贴的图片：
~~~再帮我加一点基础知识注释。
追答
已修改。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看看吧。
更多追问追答
追问
我已经加到200分了！实在太感谢了，回答太好了，还教我考虑了一些实际应用中需要的代码：比如兼容IE.只是有两个小问题，需要你再帮我修改一下，这两个小问题搞定后，基本就可以算是标准表单校验了。由于字数限制，给你贴的图片：
~~~记得帮我加一些基础的知识注释哈，好多看不懂，嘿嘿。
追答
你也太懒了，这样还叫学习？点提交不提示是因为我就没给提交绑定事件，输入正确的样式，跟错误的样式逻辑上是差不多，你参考代码自己完全都能够实现。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
