MyProgramLife(01) ---- 表单验证

来源：互联网发布：电玩巴士官方淘宝店编辑：程序博客网时间：2024/06/08 19:46
最近学习TP框架后，使用里面的自动验证，可是在写前端的验证时却显得有些不熟悉，大大减低了我的效率，是时候回顾一下前端的JS了，主要知识点：表单验证，正则表达式，三级联动，jquery，jquery与DOM的相互转换。
<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>基本的表单验证</title>    <script src="js/jquery-1.10.2.js"></script></head><body><form action="mytest.php" method="post" onsubmit="return formCheck()">    <fieldset>        <legend>注册练习</legend>        <p>            <label for="username">姓名：</label>            <input type="text" name="username" id="username"/>        </p>        <p>            性别：            <input type="radio" name="sex" id="male"/><label for="male">男</label>            <input type="radio" name="sex" id="female"/><label for="female">女</label>        </p>        <p>            <label for="pwd">密码：</label>            <input type="password" name="pwd" id="pwd"/>        </p>        <p>            <label for="email">邮箱：</label>            <input type="email" name="email" id="email"/>        </p>        <p>            <label for="phone">电话：</label>            <input type="tel" name="phone" id="phone"/>        </p>        <p>            <label for="province">家庭地址：</label>            <select name="province" id="province">                <option value="province_default">--请选择省份---</option>            </select>            --            <select name="city" id="city">                <option value="default_city">--请选择城市--</option>            </select>            --            <select name="concretely" id="concretely">                <option value="default_concretely">--请选择区县--</option>            </select>        </p>        <p>        <p>喜欢的游戏：</p>        <p>            <input type="checkbox" name="interest" id="LOL"/>            <label for="LOL">LOL</label>        </p>        <p>            <input type="checkbox" id="CF" name="interest"/>            <label for="CF">CF</label>        </p>        <p>            <input type="checkbox" name="interest" id="QQ飞车"/>            <label for="QQ飞车">QQ飞车</label>        </p>        <p>            <input type="submit" value="立即注册"/>        </p>    </fieldset></form><script>    //定义二维数组，放置省份和城市，第二维中的第一个是省份    var address = [        ["四川省", "成都市","泸州市","绵阳市","德阳市"],        ["广东省", "广州市","佛山市","湛江市"]    ];    //定义三维数组，放置具体的区县    var concretely =[      [          [["武侯区"],["青羊区"],["金牛区"]],          [["江阳区"],["龙马谭区"],["纳溪区"],["泸县"]],          [["绵阳区1"],["绵阳区2"],["绵阳区3"]],          [["德阳区1"],["德阳区2"],["德阳区3"]]      ],      [            [["广州市区1"],["广州市区2"],["广州市区3"]],            [["佛山市区1"],["佛山市区2"],["佛山市区3"]],            [["湛江市区1"],["湛江市区2"],["湛江市区3"]]      ]    ];      //省份加载    $(function(){        $("#province").children("option").length=1;            for(var i =0;i<address.length;i++){                obj="<option value='"+address[i][0]+"'>"+address[i][0]+"</option>";                $("#province").append(obj);            }    });    var optionIndex;    //加载城市，PrOptionIndex返回选中的省份索引   $("#province").change(function(){          //selectedIndex是返回被选项的索引值，jquery未封装因此需要将jquery对象转为DOM对象       PrOptionIndex =$(this).get(0).selectedIndex;                          /*如果是DOM对象转jquery对象 ：                              var sel =document.getElementByID("province"); //DOM对象                              var $sel = $(sel);                           */       //清空城市和区县       $("#city").get(0).options.length=1;       $("#concretely").get(0).options.length=1;       //城市都是从第二维的第二个开始的，所有循环从i=1开始       for(var i=1;i<address[PrOptionIndex-1].length;i++){           obj="<option value='"+address[PrOptionIndex-1][i]+"'>"+address[PrOptionIndex-1][i]+"</option>";           $("#city").append(obj);       }   });    //加载区县，cityOptionIndex返回选中的城市索引    $("#city").change(function(){        $("#concretely").get(0).options.length=1;        var cityOptionIndex = $(this).get(0).selectedIndex;        for(i=0;i<concretely[PrOptionIndex-1][cityOptionIndex-1].length;i++){            obj =   obj="<option value='"+concretely[PrOptionIndex-1][cityOptionIndex-1][i]+"'>"            +concretely[PrOptionIndex-1][cityOptionIndex-1][i]+"</option>";         $("#concretely").append(obj);        }    });    //表单验证部分    function iptCheck(reg,obj,err){        $(obj).next("span").remove();        if(! reg.test($(obj).val())){            $(obj).after("<span style='color: #f00;font-size: 12px;'>"+err+"</span>");            return false;        }        return true;    }    $("input[name='username']").blur(function(){        iptCheck(/^[\u4e00-\u9fa5]{2,10}$/,this," 姓名必须为汉字且长度大于2");    });    $("input[name='pwd']").blur(function(){        iptCheck(/^[0-9a-zA-Z]{6,30}$/,this," 密码含有特殊字符或长度小于6");    });    $("input[name='email']").blur(function(){        iptCheck(/\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+/,this," 邮箱格式为xx@xx.xx");    });    $("input[name='phone']").blur(function(){        iptCheck(/0?(13|14|15|18)[0-9]{9}/,this," 请输入中国内陆的手机联系方式");    });    //提交按钮时调用所有表单控件失去焦点事件function formCheck(){    $(":input").each(function(){       $(this).blur();    });    if($(":input+span").length==0)        return true;    return false;}</script></body></html>
效率实在是太低了，这个代码都写了将近三个小时，看来还是要多加练习啊！！
0 0