html5表单自动验证1

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/qq_29077101/article/details/83657214

//css样式开始：
*{
    margin:0px;
    padding:0px;
    border:0px;
    text-decoration:none;
    list-style:none;}
form{
    width:450px;
    margin:0px auto 50px;}
input{
    width:300px;
    margin:0px auto;
    height:40px;
    border:1px solid #ccc;
    padding:0px 10px;
    line-height:40px;
    font-size:16px;}
button{
    width:90px;
    margin-left:10px;
    line-height:30px;
    background:#F90;
    color:#fff;}
    //css样式结束：

//html代码：
<form action="test.php" method="get" onsubmit="return">
  <input type="text" name="yz" id="yz" placeholder="输入6~18位用户名，可包含大小英文字母、数字、_、—" class="form-control" required pattern="[A-Za-z0-9_—]{6,18}">
  <button type="submit" id="subscribe_submit">验证</button>
</form>
//pattern="[A-Za-z0-9_—]{6,18}"验证输入的值是不是有大小英文字母、数字、下划线和中划线组成6~18位。