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

时间：2021-04-04 06:10:08

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

相关文章