html5 表单样式 表单验证1 2 3

html5 表单样式 ie9以下不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
ie 9 不支持 html智能表单form
<hr/>
    <input type="text" list="mydata" autofocus placeholder="请输入电影名称">
    <!--autofocus 自动获得焦点-->
    <!--placeholder 点击input内容消失-->
    <!--required 必填-->
<datalist id="mydata">
    <option label="搜索10000次" value="让子弹飞">
    <option label="搜索9000次" value="非诚勿扰">
    <option label="搜索8000次" value="大笑江湖">
    <option label="搜索7000次" value="赵氏孤儿">
    <option label="搜索6000次" value="花千骨">
</datalist>
<br/><br/><br/><br/><br/>
<form action="" method="get" name="res" >
    邮件<input type="email"/><br/>
    网址<input type="url" ><br/>      <!--必填 -->
    日期<input type="date"/><br/>
    月份<input type="month">
    电话<input type="tel"> 在手机端才有数字键盘效果<br/>
    <!--时间 time datetime
    数字 number-->
    进度条 <input type="range" min="0" max="3" step="1"/><br/>
    搜索 <input type="search" value="搜索"><br/>
    颜色<input type="color"/><br/>
    数字<input type="number" min="0" max="100" step="1"/><br/>
    时间日期<input type="datetime"/>
    正则<input type="text" pattern="[789]+" required/>

    <input type="submit" value="sub"/>

</form>
对本网站的评价:<input type="text" name="txtComment" value="Very Good!" form="res" />
</body>
</body>
</html>

 表单验证1 

表单提交时激发 添加默认验证消息 //txtName.setCustomValidity
checkValidity()实现实时验证
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
</head>
<body>
    <form method="get">
        <input required type="text" id="name" name="name" >
        <span id="tip">*</span><br>
        <input type="submit" value="submit">
    </form>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        $("name").addEventListener("blur",blurCheck,false);
        function blurCheck(){
           /* var value=$("name").value;
            if(value.length==0){
            // 改变默认提示
                $("name").setCustomValidity("用户名不能为空");
            }else{
                //清空自定义验证，让文本提交
                $("name").setCustomValidity("");
            }*/
            //实时验证
            var res=$("name").checkValidity();
            if(res){
                $("tip").innerHTML="通过";
            }else{
                $("tip").innerHTML="用户名称不能为空";
            }
        }
    </script>
</body>
</html>

 

表单验证二  

invalid 错误时激发
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <script>
    function $(id){
        return document.getElementById(id);
    }

    function initial(){
        document.frmLogin.addEventListener("invalid",frmLogin_invalid,true);
    }

    //表单执行遇到错误时激发的事件
    function frmLogin_invalid(e){
        //获取产生错误的元素
        var tar = e.target;
        tar.style.backgroundColor="red";
        var tipId = tar.id + "Tip";
        $(tipId).innerHTML="请输入正确数据";
    }
    window.addEventListener("load",initial,false);
  </script>
 </head>

 <body>
  <form name="frmLogin">
    用户名称:<input type="text" id="txtName" required />
    <span id="txtNameTip"></span><br />
    用户Email:<input type="email" id="txtEmail" />
    <span id="txtEmailTip"></span><br />
    <input type="submit" value="提交" />
  </form>
 </body>
</html>

表单验证三 

实时验证 validity.patternMismatch
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <script>
    function $(id){
        return document.getElementById(id);
    }

    function initial(){
        txtName=$("txtName");
        txtEmail=$("txtEmail");
        txtPhone=$("txtPhone");

        //绑定事件
        txtName.addEventListener("blur",txtName_blur,false);
        txtEmail.addEventListener("blur",txtEmail_blur,false);
        txtPhone.addEventListener("blur",txtPhone_blur,false);
    }
    
    function txtPhone_blur(){
        if(txtPhone.validity.patternMismatch){
            $("txtPhoneTip").innerHTML="电话号码格式不正确";
        } else{
            $("txtPhoneTip").innerHTML="通过";
        }
    }

    function txtEmail_blur(e){
        //验证格式是否正确
        if(txtEmail.validity.typeMismatch){
            $("txtEmailTip").innerHTML="Email格式不正确，请重新输入";
        } else {
            $("txtEmailTip").innerHTML="通过";
        }
    }

    function txtName_blur(e){
        // 判断txtName是否通过了所有的验证
        //1、checkValidity
        //2、通过validity属性的valid状态
        var ret = txtName.validity.valid;
        if(ret){
            $("txtNameTip").innerHTML="通过";
        }else{
            if(txtName.validity.valueMissing){
                //数据为空,有required,但是没有输入值
                $("txtNameTip").innerHTML="请输入您的姓名";
            }
        }
    }


    window.addEventListener("load",initial,false);
  </script>
 </head>

 <body>
  <form name="frmLogin">
    用户名称:<input type="text" id="txtName" required />
    <span id="txtNameTip"></span><br />
    用户Email:<input type="email" id="txtEmail" />
    <span id="txtEmailTip"></span><br />
    移动电话:<input type="phone" id="txtPhone" pattern="^1[3,5,4,8,7]\d{9}$" />
    <span id="txtPhoneTip"></span><br />
    <input type="submit" value="提交" />
  </form>
 </body>
</html>

 

1)、valid
验证元素是否通过所有验证
2)、valueMissing
与required属性相关联，设置了required属性，但是没有赋值，该属性为true
3)、typeMismatch
与type属性相关联,如果输入的数据违反了type类型定义的格式，该属性为true
4)、patternMismatch
与patter属性相关联,如果输入的数据违反了patter属性定义的格式，该属性为true
5)、customError
与setCustomValidity()方法相关的，如果用户设置了setCustomValidity()并且没有清空，该值为true

posted @ 2016-03-17 22:48  gyz418  阅读(798)  评论(4)    收藏  举报