1. QQ号：<input type="text" id="txtQQ"><span></span><br>
    2. 邮箱：<input type="text" id="txtEMail"><span></span><br>
    3. 手机：<input type="text" id="txtPhone"><span></span><br>
    4. 生日：<input type="text" id="txtBirthday"><span></span><br>
    5. 姓名：<input type="text" id="txtName"><span></span><br>
    7. //1.获取页面所有的inputs
    8. var inputs = my$byTagName("input");
    9. //2.遍历inputs绑定事件
    10. for(var i=0;i<inputs.length;i++){
    11.     inputs[i].onblur = function(){
    12.         checkCorrect(this);
    13.     }
    14. }
    15. //3.每次文本框失去焦点时候确定文本框对应的正则以及提示
    16. function checkCorrect(ele){
    17.     var reg = null;
    18.     var tip = null;
    19.     //检验QQ
    20.     if(ele.getAttribute("name") == "qq") {
    21.         reg = /^[1-9]\d{4,10}$/;
    22.         tip = "请输入正确的QQ号码";
    23.     }
    24.     //校验email
    25.     else if(ele.getAttribute("name") == "email"){
    26.         reg = /^\w+@\w+\.\w+(\.\w+)?$/;
    27.         tip = "请输入正确的email";
    28.     }
    29.     else if(ele.getAttribute("name") == "phone"){
    30.         reg = /^1[34578]\d{9}$/;
    31.         tip = "请输入正确的手机号码";
    32.     }
    33.     else if(ele.getAttribute("name") == "birthday"){
    34.         reg = /^((\d{4})-(\d{2})-(\d{2}))$/;
    35.         tip = "请输入正确的生日";
    36.     }
    37.     else if(ele.getAttribute("name") == "name"){
    38.         reg = /^\w{2,}$/;
    39.         tip = "请输入正确的名字";
    40.     }
    41.     //真正去进行校验
    42.     doCheck(ele,reg,tip);
    43. }
    45. //正则的校验
    46. function doCheck(element, reg, tip){
    47.     //获取当前input的下一个兄弟元素
    48.     var span = element.nextElementSibling;
    49.     //如果正则校验通过，则输入正确
    50.     if(reg.test(element.value)){
    51.         span.style.color = "green";
    52.         setInnerText(span,"输入正确");
    53.     }
    54.     else{
    55.         span.style.color = "red";
    56.         setInnerText(span,tip);
    57.     }
    58. }

    test.gif