Dom表单验证 example

来源：互联网发布：学校网络监控方案编辑：程序博客网时间：2024/05/16 01:41

<!DOCTYPE html>
<html>
<head>
    <title>Dom表单验证 example</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript">
   /* 获得文本输入框内容
   定义正则表达式对象
   校验 */
   function fun1(){                  //封装表单所有的校验方法
    var flag = true;
    if(!checkname()){
     flag = false;
    }
    if(!checkemail()){
     flag = false;
    }
    //alert(flag);
    return flag;
   }
   function checkname(){                     //下面为校验方法
   //1 获得文本输入框中的内容
     //var nameInput= document.getElementsByName("name")[0];
     var nameInput = document.form1.name;

     //var name = nameInput.getAttribute("value");
     var name = nameInput.value; //DHTML属性
    //2 定义正则表达式对象
    var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
    //3 校验
    if(!reg.test(name)){
     //校验失败=> 提示用户.
     //alert("用户需要6到10位,不能以数字开头!");
     addError(nameInput,"用户需要6到10位,不能以数字开头!");
     return false;//拦截表单提交
    }else{
     //验证成功=>清除错误信息
     removeError(nameInput);
     return true;
    }
    }
   function checkemail(){
    var emailInput = document.form1.email;
    var email = emailInput.value;
    var reg = /^([a-z0-9_\.-]+)@[\da-z\.-]+\.([a-z\.]{2,6})$/g;
    if(!reg.test(email)){
     //alert("邮箱格式不正确");
     addError(emailInput,"邮箱格式不正确");
     return false;//拦截表单提交

    }else{
     removeError(document.form1.email);
     return true;
    }
   }
   //参数1 标识往哪里添加            //这两个方法的功能分别为将错误信息显示在输入框附近和清除错误信息
   //2   错误信息是什么
   function addError(where,what){
    where.nextSibling.innerHTML = what;      //这个属性的意思是显示where标签的下一个标签
   }
   function removeError(where){
    where.nextSibling.innerHTML = "";
   }
   </script>
</head>

</form>
</body>
</html>

阅读全文

0 0