H5表单验证2(h5自带验证美化)

最新推荐文章于 2024-03-22 14:50:38 发布

蔡蔡动起来

最新推荐文章于 2024-03-22 14:50:38 发布

阅读量5.1k

点赞数 3

分类专栏： h5 文章标签： h5自带验证美化表单验证

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82823329

版权

h5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

h5自带验证美化：要做出不一样的表单验证，我们要了解一些伪类及css选择器。

:required和:optional
:in-range和:out-of-range
:valid和:invalid
:read-only和:read-write

//:required和:optional
<style>
        .container{
            max-width: 400px;
            margin: 20px auto;
        }
        input,select,textarea{
            width: 240px;
            margin: 10px 0;
            border: 1px solid #999;
            padding: 0.5em 1em;
        }
        label{
            color: #999;
            margin-left: 10px;
        }
/*必填*/
        input:required,textarea:required{
            border-right: 3px solid #aa0088;
        }
/*选填*/
        input:optional,select:optional{
            border-right: 3px solid #999;
        }

        input:required+label::after{
            content: '(必填)';
        }
        input:optional+label::after{
            content: '(选填)';
        }
/*浏览器默认focus的时候没有边框*/
        input:focus,select:focus,textarea:focus{
            outline: 0;
        }
/*focus的时候加自定义边框*/        
        input:required:focus,textarea:required:focus{
            box-shadow: 0 0 3px 1px #aa0088;
        }


        input:optional:focus,textarea:optional:focus{
            box-shadow: 0 0 3px 1px #999;
        }

        input[type="submit"]{
            background-color: #c0a;
            border: 2px solid #a08;
            padding: 10px 0;
            color: #ffffff;
            width: 300px;
        }
        input[type="submit"]:hover{
            background-color: #a08;
        }
    </style>
</head>
<body>
<div class="container">
    <form action="#">
        <input type="name" required><label>名称</label>
        <input type="email" required><label>邮箱</label>
        <input type="tel"><label>手机</label>
        <input type="url"><label>网址</label>
        <select name="#" id="##">
            <option value="1">非必填选项一</option>
            <option value="2">非必填选项二</option>
            <option value="3">非必填选项三</option>
            <option value="4">非必填选项四</option>
        </select>
        <textarea name="#" id="#" cols="30" rows="10" required>留言 (必填)</textarea><br/>
        <!--<button></button>-->
        <input type="submit" value="提交表单"/>
    </form>
</div>

</body>

利用:valid和:invalid制作纯css的表单验证。

 <style>
        .container{
            margin: 100px;
            position: relative;
        }
        input{
            border: 1px solid #999;
            outline: 0;
            width: 140px;
            height: 30px;
            line-height: 30px;
            text-indent: 36px;
            transition: all .3s;
            border-radius: 3px;

        }
        span.title{
            position: absolute;
            line-height: 30px;
            height: 30px;
            left: 2px;
            top: 2px;
            transition: all .3s;

        }
        input:focus,input:hover{
            text-indent: 2px;
        }
        input:focus+span.title,input:hover+span.title{
            transform: translateX(-120%);
        }

        input:valid~label::after{
            content: '你输入的邮箱正确';
        }
        input:invalid~label::after{
            content: '你邮箱错误';
        }
        input:valid{
            border: 1px solid green;
        }
        input:invalid{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <input type="email" id="mail" required placeholder="输入邮箱"/>
    <span class="title">邮箱</span>
    <label for="mail"></label>
</div>
</body>

onchange 当文本框失去焦点时，检查input里的值是否符合要求，执行函数

oninput 实时监听文本框的值，不符合要求事件触发，（但是虽不符合要求，值却已经在文本框了）

h5表单美化综合案例演示：
用到三个事件：

oninput事件
oninvalid事件
onchange事件

带*是必填项。填写正确边框变绿出现绿色√。填写错误边框变红出现红色❌。

判断验证密码与确认密码是否一致。

setCustomValidity()改变默认提示。

  <style>
        .onelist{
            margin: 10px 0 5px 12px;
        }
        .onelist label{
            width: 80px;
            display: inline-block;
        }
        .onelist input,.onelist select{
            height: 25px;
            line-height: 25px;
            width: 220px;
            border-radius: 3px;
            border: 1px solid #e2e2e2;
        }
        .onelist input[type=submit]{
            width: 150px;
            height: 30px;
            line-height: 30px;
        }

        input:required,select:required{
            background: url("images/img/star.jpg") no-repeat 90% center;/*x轴偏移量90% y轴center*/
        }
        /*必填验证通过*/
        input:required:valid,select:required:valid{
            background: url("images/img/right.png") no-repeat 90% center;
            box-shadow: 0 0 5px green;
            border-color: green;
        }
        /*不通过验证.一开始肯定是错误的*/
        input:focus:invalid,select:focus:invalid{
            background: url("images/img/error.png") no-repeat 90% center;
            box-shadow: 0 0 5px red;
            border-color: red;
            outline: red solid 1px;
        }
    </style>
</head>
<body>
<form action="" class="myform">
    <div class="onelist">
        <label for="UserName">手机号</label>
        <input type="text" name="UserName" id="UserName" placeholder="请输入手机号码" pattern="^[0-9]{10}$" required oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的手机号')"/>
    </div>
    <div class="onelist">
        <label for="Password">密码</label>
        <input type="password" name="Password" id="Password" placeholder="6~20位" pattern="^[a-zA-Z0-9]\w{5-19}$" required oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的密码')" onchange="checkpassword()"/>
    </div>
    <div class="onelist">
        <label for="Repassword">确认密码</label>
        <input type="password" name="Repassword" id="Repassword" placeholder="确认密码" required onchange="checkpassword()"/>
    </div>
    <div class="onelist">
        <label for="Repassword">了解方式</label>
        <select name="know" required>
            <option value="">==请选择==</option>
            <option value="1">搜索引擎</option>
            <option value="2">朋友圈</option>
            <option value="3">朋友推广</option>
            <option value="4">广告投放</option>
        </select>
    </div>
    <div class="onelist"><input type="submit" value="提交"/></div>
</form>
<script type="text/javascript">
    function checkpassword(){
        var pass1=document.getElementById('Password');
        var pass2=document.getElementById('Repassword');
        if(pass1.value!=pass2.value){
            pass2.setCustomValidity("两次密码输入不一致");
        }else{
            pass2.setCustomValidity("");
        }
    }
</script>
</body>

练习：

不写样式，只是选择input符合验证时的label,input符合验证时valid,input不符合验证时invalid
选择label,label和Input是同一父级元素，因此用~选择器
input获得焦点是focus
span是input相邻兄弟元素，因此用加号选择器。

修改默认气泡样式：

默认气泡在各个浏览器中也不一样。

在谷歌29之前的版本我们可以通过如下伪元素修改，::webkit-validation-bubble.但是之后废弃了。

方法：

用插件
用自己的方式
1.阻止默认气泡
2.创建新的气泡

<style>
        .oneline{line-height: 1.5;margin:10px auto;}
        .oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;}
        .oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}
        .oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}
        .error-messages{color:red; margin-left: 100px}
    </style>
</head>
<body>
<form id="forms">
    <div class="oneline">
        <label for="name">用户名:</label>
        <input id="name" class="sinput" name="name" type="text" required>
    </div>
    <div  class="oneline">
        <label for="email">Email:</label>
        <input id="email" class="sinput"  name="email" type="email" required>
    </div>
    <div  class="oneline">
        <input type="submit" value="提交" id="thesubmit">
    </div>
</form>
<script>
    function replaceInvalidityUi(form){
        form.addEventListener("invalid",function(event){
            event.preventDefault();//阻止默认气泡
        },true);
        //提交   如果验证不通过，阻止默认气泡
        form.addEventListener("submit",function(event){
            if(!this.checkValidity()){
                event.preventDefault();
            }
        },true)

        //提交之后，做一个点击的提交事件
        var submitBtn=document.getElementById("thesubmit");
        submitBtn.addEventListener("click",function(event){
            var inValidityField=form.querySelectorAll(":invalid");//不符合验证信息的
            var errorMessage=form.querySelectorAll(".error-messages");//清掉所有错误信息
            var parent;

            //循环每一个错误信息
            for(var i=0;i<errorMessage.length;i++){
                errorMessage[i].parentNode.removeChild(errorMessage[i]);
            }

            //添加新的错误信息  错误信息：validationMessage
            for(var i=0;i<inValidityField.length;i++){
                parent=inValidityField[i].parentNode;
                parent.insertAdjacentHTML("beforeend","<div class='error-messages'>"+inValidityField[i].validationMessage+"");
            }

            if(inValidityField.length>0){
                inValidityField[0].focus();
            }
        })

    }
    var form=document.getElementById('forms');
    replaceInvalidityUi(form);
</script>
</body>

用beforebegin可以将表单错误提示信息插入到元素本身之前。

蔡蔡动起来

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
H5表单验证2(h5自带验证美化)

h5自带验证美化：要做出不一样的表单验证，我们要了解一些伪类及css选择器。:required和:optional :in-range和:out-of-range :valid和:invalid :read-only和:read-write//:required和:optional&lt;style&gt; .container{ max-w...
复制链接

扫一扫