一、表单
<body>
<section id="register">
<div><img src="data:images/logo.jpg" alt="logo" /><img src="data: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="data: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("");
} }); });