<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
form {
margin:10px auto;
width:400px;
padding:40px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
border-radius:10px;
background-color: lightblue;
font-weight:bold;
color:#FFF;
}
form label {
display:block;
padding:5px;
}
form label span {
width:20%;
display:inline-block;
font-family:"宋体";
font-size:16px;
text-align:right;
}
form label input {
line-height:22px;
height:25px;
border:3px solid #f90;
width:70%;
}
form label input:focus {
border:3px solid #f00;
outline:none;
}
form input[type=submit] {
margin-left:22%;
margin-top:20px;
width:100px;
border:3px solid #f00;
background-color:#f00;
font-size:18px;
letter-spacing:5px;
color:#fff;
font-weight:bold;
}
form #error{
border:1px solid #999;
background-color:#ccc;
font-size:12px;
color:#f00;
padding:5px;
line-height:18px;
}
</style>
<script type="text/javascript">
function addError(err){
document.getElementById("error").innerHTML += "* "+err+"<br />";
}
function clearError(){
document.getElementById("error").innerHTML = "";
}
function invalidHandler(evt){
// 获取出错元素的ValidityState对象
var validity = evt.srcElement.validity;
var str="";
// 如果有自定义的提示信息，则使用它来提示
if(validity.customError){
str = evt.srcElement.validationMessage;
}else{
// 以下是检测的ValidityState对象的各个属性，以判断具体错误
if(validity.valueMissing){
str+="不能为空；";
}
if(validity.typeMismatch){
str+="与类型不匹配；";
}
if(validity.patternMismatch){
str+="与pattern正则不匹配；";
}
if(validity.tooLong){
str+="字符过长；";
}
if(validity.rangeUnderflow){
str+="不能小于最小值；";
}
if(validity.rangeOverflow){
str+="不能大于最大值；";
}
if(validity.stepMismatch){
str+="不符合step特性所推算出的规则；";
}
// 使用表单元素的title特性值来组合提示信息
str = evt.srcElement.title + str;
}
// 添加错误提示
addError(str);
// 阻止事件冒泡
evt.stopPropagation();
// 取消后续的浏览器默认的处理方式
evt.preventDefault();
}
window.onload=function(){
var register=document.getElementById("register");
// 注册监听表单中的invalid事件，捕获到错误即处理
register.addEventListener("invalid",invalidHandler,true);
}
</script>
</head>
<body>
<form id="register" name="register">
<label for="userName"><span>用户名</span>
<input name="userName" type="text" title="用户名" placeholder="请输入您的姓名" required />
</label>
<label for="password"><span>登录密码</span>
<input name="password" type="password" title="登陆密码" placeholder="请输入您的登陆密码" required />
</label>
<label for="mypapers"><span>证件类型</span>
<input name="mypapers" type="text" title="证件类型" list="mypaperss" />
</label>
<datalist id="mypaperss">
<option value="identity card">身份证</option>
<option value="Hong Kong Macao and Taiwan residence permit">港澳台居住证</option>
<option value="foreigner's permanent residence permit">外国人永久留居证</option>
</datalist>
<label for="firstName"><span>姓名</span>
<input name="firstName" type="text" title="姓名" placeholder="请输入您的姓名" required />
</label>
<label for="papernumber"><span>证件号码</span>
<input name="papernumber" type="text" title="证件号码" placeholder="请输入您的证件号码" min="0" max="18" />
</label>
<label for="emailaddress"><span>邮箱</span>
<input type="email" name="emailaddress" title="邮箱" placeholder="请输入您的邮箱" required />
</label>
<label for="phonenumber"><span>手机号码</span>
<input name="phonenumber" type="text" title="手机号码" placeholder="请输入您的手机号码" min="0" max="11" />
</label>
</label>
<label for="zhengjianleixing"><span>旅客类型</span>
<input name="zhengjianleixing" type="text" title="旅客类型" list="zhengjianleixings" />
</label>
<datalist id="zhengjianleixings">
<option value="human">成人</option>
<option value="child">儿童</option>
<option value="collage">学生</option>
<option value="other">伤残军人、伤残人名警察</option>
</datalist>
<input type="submit" name="submit" value="提交" onclick="clearError()" />
<div id="error"></div>
</form>
</body>
</html>
1411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
