吃惊！强大的HTML5居然能使表单验证变得如此如此简单！！！

最新推荐文章于 2024-05-09 21:24:37 发布

小菜鸟正洋洋

最新推荐文章于 2024-05-09 21:24:37 发布

阅读量1.2w

点赞数 2

分类专栏：体会文章标签： HTML5 表单验证 pattern

本文链接：https://blog.csdn.net/qq_32080545/article/details/51872353

版权

体会专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（HTML5大神可以就此飘过，以前通过JS写的那么多的代码，现在通过HTML5居然可以怎么简单），废话就少说了，直接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<header>
    <h3>用户注册</h3>
</header>
<nav>
    <span style="color: #666; font-size: 14px">已有账号?</span><a href="#">去登录?</a><p></p><p></p>
</nav>
<section>
    <fieldset>
        <legend>请正确填写相关信息</legend>
        <form action="#" method="post" autocomplete="on">
          <p><span style="letter-spacing: 1.3em">真实姓</span>名：<label><input type="text" required name="name" pattern="[\u4e00-\u9fa5]{2,}"  oninvalid="validatelt(this,'真实姓名必须是中文，且长度不小于2')"/></label></p>
            <!-- require属性，规定必须在提交之前填写输入域（不能为空）-->
            <!-- pattern属性，描述了一个正则表达式用于验证 <input> 元素的值-->
            <!-- required属性，要求该输入域不能为空 -->
            <p><span style="letter-spacing:6em">昵</span>称：<label><input type="text" placeholder="该昵称用于登录" required name="nichen"/></label></p>
            <!-- placehokder属性，用于对该输入框的提示内容-->
            <p><span style="letter-spacing: 1.3em">登录密</span>码：<label><input type="password" pattern="[A-Za-z0-9]{6,30}" name="password" oninvalid="validatelt(this,'密码长度至少为六位，且不能有中文')" /></label></p>
            <p><span style="letter-spacing: 6em">性</span>别：<label>
                <input type="radio" name="sex" value="man" />男：</label>
                <input type="radio" name="sex" value="women"/>女：</label>
            </p>
            <p><span style="letter-spacing: 1.3em">出生日</span>期：<label><input type="date" name="birthday" max="2016/7/10" required/></label></p>
            <p><span style="letter-spacing: 1.3em">电子邮</span>箱：<label><input name="email" type="email" required/></label></p>
            <p><span style="letter-spacing: 1.3em">联系电</span>话：<label><input name="phone" type="text"  required  pattern="1[34578]\d{9}$"  oninvalid="validatelt(this,'电话号只能是11位的整数')" /></label></p>
            <p><span>选择你喜欢的颜色：</span><label><input name="color" type="color" required/></label></p>
            <input type="submit"/>
        </form>
    </fieldset>
</section>
<footer>
    <hr/>
    底部栏
</footer>
</body>
<script>
    //对悬浮窗的设置
    function validatelt(inputelement,err){
        if(inputelement.validity.patternMismatch){
            inputelement.setCustomValidity(err);
            //错误后就清空，不过执行顺序有点问题就不要了
//                if(confirm("输入有误,是否清空此项？")){
//                    inputelement.value="";
//                }
        }else{
            inputelement.setCustomValidity("");
            return true;
        }
    }
</script>
</html>

在回头看以前写的JS代码是否瞬间觉得HTML5的强大了啊？？？

小菜鸟正洋洋

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
吃惊！强大的HTML5居然能使表单验证变得如此如此简单！！！

（HTML5大神可以就此飘过，以前通过JS写的那么多的代码，现在通过HTML5居然可以怎么简单），废话就少说了，直接上代码：用户注册已有账号?去登录? 请正确填写相关信息真实姓名：元素的值-->
复制链接

扫一扫

专栏目录