表单验证—html5新特性表单验证

一、表单

<body>
<section id="register">
<div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
    <h1 class="hr_1">新用户注册</h1>
    <form action="register_success.htm" method="post" name="myform" id="myform2">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" placeholder="以英文字母开头，4~16个字母或数字" required pattern="[a-zA-Z][a-zA-Z0-9]{3,15}"/></dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd><input id="pwd" type="password" placeholder="4~10个字母或数字" required pattern="[a-zA-Z0-9]{4,10}"/></dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd><input id="repwd" type="password"placeholder="4~10个字母或数字" required pattern="[a-zA-Z0-9]{4,10}"/></dd>
        </dl>
        <dl>
            <dt>电子邮箱：</dt>
            <dd><input id="email" type="email"placeholder="含有@和." required pattern="([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+"/></dd>
        </dl>
        <dl>
            <dt>手机号码：</dt>
            <dd><input id="mobile" type="text" placeholder="1开头的11位数字" required pattern="[1][0-9]{10}"/></dd>
        </dl>
        <dl>
            <dt>生日：</dt>
            <dd><input id="birth" type="text"placeholder="格式为1984-9-7或1985-09-07" required pattern="(?:19\d{2}|200\d)-(?:1[0-2]|0?[0-9])-(?:3[01]|[12][0-9]|0?[0-9])"/></dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="" type="image" src="images/register.jpg" class="btn" id="image" /></dd>
        </dl>
  </form>
</section>
</body>

 

二、js验证
**
 * Created by Administrator on */
$(function () {

$("#image").click(function () {
    //验证用户名
    var user = document.getElementById("user");
    if(user.validity.valueMissing==true){
        user.setCustomValidity("用户名不能为空！");
    }else if(user.validity.patternMismatch==true){
        user.setCustomValidity("用户名必须是字母开头的4~16位的字母和数字！");
    }else{
        user.setCustomValidity("");
    }

    //验证密码
    var pwd = document.getElementById("pwd");
    if(pwd.validity.valueMissing==true){
        pwd.setCustomValidity("密码不能为空！");
    }else if(pwd.validity.patternMismatch==true){
        pwd.setCustomValidity("4~10个字母或者数字");
    }else{
        pwd.setCustomValidity("");
    }

    //验证密码2
    var pwd = document.getElementById("pwd");
    var pwd2 = document.getElementById("repwd");
    if(pwd2.validity.valueMissing==true){
        pwd2.setCustomValidity("密码不能为空！");
    }else if(pwd.validity.patternMismatch==true){
        pwd2.setCustomValidity("4~10个字母或者数字");
    }else if(pwd.value!=pwd2.value){
        pwd2.setCustomValidity("两次密码不一致！");
    }else{
        pwd2.setCustomValidity("");
    }

    //验证邮箱
    var email = document.getElementById("email");
    if(email.validity.valueMissing==true){
        email.setCustomValidity("密码不能为空！");
    }else if(email.validity.patternMismatch==true){
        email.setCustomValidity("必须包含@和.字符！");
    }else{
        email.setCustomValidity("");
    }

    //验证手机
    var mobile = document.getElementById("mobile");
    if(mobile.validity.valueMissing==true){
        mobile.setCustomValidity("密码不能为空！");
    }else if(mobile.validity.patternMismatch==true){
        mobile.setCustomValidity("必须是以1开头的11位数！");
    }else{
        mobile.setCustomValidity("");
    }

    //验证生日
    var birth = document.getElementById("birth");
    if(birth.validity.valueMissing==true){
        birth.setCustomValidity("密码不能为空！");
    }else if(birth.validity.patternMismatch==true){
        birth.setCustomValidity("必须以1985-09-08或1985-9-8的格式输入！");
    }else{
        birth.setCustomValidity("");
    }


});

});

 

posted @ 2017-12-18 22:01  老人与JAVA  阅读(493)  评论(0)  编辑  收藏  举报