1. 程式人生 > >吃驚!強大的HTML5居然能使表單驗證變得如此如此簡單!!!

吃驚!強大的HTML5居然能使表單驗證變得如此如此簡單!!!

    (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的強大了啊???