1. 程式人生 > >html5表單自動驗證1

html5表單自動驗證1

//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位。