HTML5表單驗證

HTML代碼：

<form action="index.html" method="post" id="myform">
    <dl class="register_row">
        <dt>Email地址：</dt>
        <dd><input id="email" type="email" required="required" class="register_input" pattern="^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$"/></dd>
    </dl>
    <dl class="register_row">
        <dt>設置昵稱：</dt>
        <dd><input id="nickName" type="text" class="register_input"  required="required" pattern="[a-zA-Z0-9]{4,20}"/></dd>
    </dl>
    <dl class="register_row">
        <dt>設定密碼：</dt>
        <dd><input id="pwd" type="password" class="register_input"required="required"  pattern="[a-zA-Z0-9]{6,20}"/></dd>
    </dl>
    <dl class="register_row">
        <dt>再輸入一次密碼：</dt>
        <dd><input id="repwd" type="password" class="register_input" required="required" pattern="[a-zA-Z0-9]{6,20}"/></dd>
    </dl>
    <dl class="register_row">
        <dt>性別：</dt>
        <dd><input name="sex" id="man" type="radio" value="男" checked="checked"/> <label for="man">男</label></dd>
        <dd> <input name="sex" id="woman" type="radio" value="女"/> <label for="woman">女</label></dd>
    </dl>
    <dl class="register_row">
        <dt>所在地區：</dt>
        <dd>
            <select id="province" style="width:120px;">
                <option>請選擇省/城市</option>
            </select>
        </dd>
        <dd>
            <select id="city"  style="width:130px;">
                <option>請選擇城市</option>
            </select>
        </dd>
    </dl>
    <div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></div>
</form>

 

JS代碼：

$("#registerBtn").click(function(){
    var email=document.getElementById("email");//這個只能是document對象
    if(email.validity.valueMissing==true){
        email.setCustomValidity("郵箱不能為空!");
        return;
    }
    else if(email.validity.patternMismatch==true){
        email.setCustomValidity("郵箱格式不正確！");
        return;
    }
    else{
        email.setCustomValidity("");
    }
    var name=document.getElementById("nickName");
    if(name.validity.valueMissing==true){
        name.setCustomValidity("昵稱不能為空!");
        return;
    }
    else if(name.validity.patternMismatch==true){
        name.setCustomValidity("昵稱必須是4-20位的英文和數字！");
        return;
    }
    else{
        name.setCustomValidity("");
    }
    var pwd=document.getElementById("pwd");
    if(pwd.validity.valueMissing==true){
        pwd.setCustomValidity("密碼不能為空!");
        return;
    }
    else if(pwd.validity.patternMismatch==true){
        pwd.setCustomValidity("密碼必須是6-20位的英文和數字！");
        return;
    }
    else{
        pwd.setCustomValidity("");
    }
    var rpwd=document.getElementById("repwd");
    if(rpwd.validity.valueMissing==true){
        rpwd.setCustomValidity("密碼不能為空!");
        return;
    }
    else if(rpwd.value!=pwd.value){
        rpwd.setCustomValidity("兩次輸入的密碼不一樣！");
        return;
    }
    else{
        rpwd.setCustomValidity("");
    }
    var province=document.getElementById("#province");
    if(province.value=="請選擇省/城市"){
        alert(1);
        province.setCustomValidity("請選擇省份！");
        return;
    }
    else{
        province.setCustomValidity("");
    }
    var city=document.getElementById("#city");
    if(city.value=="請選擇城市"){
        city.setCustomValidity("選擇城市不能為空！");
        return;
    }
    else{
        city.setCustomValidity("");
    }
    var us=$("#email").val();
    var u=new User($("#nickName").val(),$("#pwd").val(),us,$("#province").val()+$("#city").val(),$("input [name='sex']").val());
    users[us]=[u];
})

 

實現效果：

 

使用注意事項：
js驗證元素注意順序要與html元素的一致