表单验证—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> </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(""); } }); });