H5新增属性

H5新增验证属性

　　1.placehplder : 输入框为空时的提示

　　2.required : 规定输入框不能为空

　　3.pattern : 使用正则表达式规定输入框的数据有效性

JS validity验证属性方法

　　1.valueMissing : 输入框不能为空，若为空返回true

　　2.typeMismatch : 输入的值是否与输入框类型匹配，若不匹配返回true

　　3.patternMismatch : 输入的值是否与规定的正则表达式匹配，若不匹配返回true

自定义提示框内容

　　setCustomValidity（值）

代码

html

<form action="" method="post" name="myform">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" pattern="[a-zA-z][a-zA-z0-9]{3,15}" placeholder="以英文字母开头4~16个英文字母或数字"
                       required/></dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd><input id="pwd" type="password" pattern="[a-zA-z0-9]{4,10}" placeholder="4~10个英文字母或数字" required/></dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd><input id="repwd" type="password"/></dd>
        </dl>
        <dl>
            <dt>电子邮箱：</dt>
            <dd><input id="email" type="email"/></dd>
        </dl>
        <dl>
            <dt>手机号码：</dt>
            <dd><input id="mobile" type="text" pattern="1[0-9]{10}"/></dd>
        </dl>
        <dl>
            <dt>生日：</dt>
            <dd><input id="birth" type="text"
                       pattern="(19[0-9]{2}|200[0-9]|201[0-6])-(1[0-2]|0[1-9])-([1-2][0-9]|0[1-9]|3[0-1])"/>
            </dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="" type="image" src="images/register.jpg" class="btn"/></dd>
        </dl>
    </form>

JavaScript

/**
 * Created by Administrator on 2017/7/17.
 */
$(function () {
    $(".btn").click(function () {
        var user = document.getElementById("user");
        var pwd = document.getElementById("pwd");
        var mobile = document.getElementById("mobile");
        var birth = document.getElementById("birth");
        if(user.validity.valueMissing) user.setCustomValidity("用户名不能为空！");
            else if(user.validity.patternMismatch) user.setCustomValidity("用户名应以英文字母开头4~16个英文字母或数字！");
            else user.setCustomValidity("");
        if(pwd.validity.valueMissing) pwd.setCustomValidity("密码不能为空！");
            else if(pwd.validity.patternMismatch) pwd.setCustomValidity("密码应为4~10个英文字母或数字！");
            else pwd.setCustomValidity("");
        if(mobile.validity.patternMismatch) mobile.setCustomValidity("手机号码为1开头的11位数字！");
            else mobile.setCustomValidity("");
        if(birth.validity.patternMismatch) birth.setCustomValidity("生日为1900-2016年格式为1900-01-01或1900-1-1！");
            else birth.setCustomValidity("");
    })
})

效果