javascript表单校验练习题,和正则表达式。请大家帮我做一下,实在不会,谢谢了。200分!!!

如下图:我界面写了,但是根本就不会javascript语言,请大家一定要帮我写一下javascript代码。谢谢了200分!!有两点实现需求:1:需要用RegExp.te... 如下图:我界面写了,但是根本就不会javascript语言,请大家一定要帮我写一下javascript代码。谢谢了 200分!!
有两点实现需求:
1:需要用RegExp.test( )正则表达式判断,依据为右边蓝色的描述,当每一行输入格式错误,后面的都会提示:原来的蓝色字变为红色,并且前面加这个字:“你输入错误,”。

2.下面有一个重置按钮:点击后所有输入的东西情况

谢谢了 请一定帮小弟做一下实在不会。但是又想学习。200分!
表单界面的代码,在云盘里面,请下下来,帮我写一下javascript代码谢谢了。
http://pan.baidu.com/s/1qWP8MlA
展开
 我来答
灵葬外与他29
2015-11-22 · TA获得超过2183个赞
知道小有建树答主
回答量:1221
采纳率:50%
帮助的人:934万
展开全部
<!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>&nbsp;请输入订单信息:&nbsp;</legend>
            <label for="text1">订单编号:</label>
            <input type="text" id="text1" name="text" data-check="/^[1-9a-zA-Z_-]{6}$/"><label class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入第一位非零的六位订单号</label>
            <div>
                <label for="text2">客户姓名:</label>
                <input type="text" id="text2" name="text" data-check="/^[\u4E00-\u9FFF]{1,12}$/"><label class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入不超过12个汉字的姓名</label>
            </div>
            <div>
                <label for="text3">身份证号:</label>
                <input type="text" id="text3" name="text" data-check="/^\d{5-18}$/"><label class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入5-18位的纯数字身份证号</label>
            </div>
            <div>
                <label for="text4">送货地址:</label>
                <input type="text" id="text4" name="text" data-check="/^\S+$/"><label class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;送货地址必须填写</label>
            </div>
            <div>
                <label for="text5">联系电话:</label>
                <input type="text" id="text5" name="text" data-check="/^1\d{12}$/"><label class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入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">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入你的电子邮箱</label>
            </div>
            <hr />
            <div id="text7">
                <input type="button" id="button1" name="button" value="提交">&nbsp;&nbsp;&nbsp;
                <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 = "&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;你输入正确!";
                    nextDom.className = "font";
                } else {
                    nextDom.innerHTML = "&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;你输入错误!";
                    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分不够,给我说下,我在开一个问题,然后加分采纳-由于字数限制问题我贴的图片:


\

~~~再帮我加一点基础知识注释。

追答

已修改。

惜需满n
2015-11-21 · TA获得超过476个赞
知道小有建树答主
回答量:399
采纳率:0%
帮助的人:347万
展开全部

看看吧。

更多追问追答
追问

        我已经加到200分了!实在太感谢了,回答太好了,还教我考虑了一些实际应用中需要的代码:比如兼容IE.只是有两个小问题,需要你再帮我修改一下,这两个小问题搞定后,基本就可以算是标准表单校验了。由于字数限制,给你贴的图片:

~~~记得帮我加一些基础的知识注释哈,好多看不懂,嘿嘿。


追答
你也太懒了,这样还叫学习?点提交不提示是因为我就没给提交绑定事件,输入正确的样式,跟错误的样式逻辑上是差不多,你参考代码自己完全都能够实现。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式