html5表单验证提示美化,html5表单验证美化综合案例

用到的事件：

oninput  在值发生变化时立马触发

oninvalid  在不符合验证的时候触发

onchange  虽然触发值会发生变化，但不是立刻触发，要鼠标失去焦点时才能触发

onfocus  在获得焦点的时候触发

效果图

form

.container{margin:100px;font-size:14px;position: relative;}

.item{position: relative;width:250px;height:40px;}

input,select{width:250px;height:20px;line-height:20px;border-radius: 4px;border:1px solid #999;color:#999;margin-bottom:10px;padding:5px;position: absolute;left:66px;}

.item label{position: absolute;left:0;top:5px;}

select{height:30px;width:260px;}

input[type=submit]{height:30px;line-height:20px;position:absolute;left:0;}

input:required,select:required{background:url(img/star.jpg) 90% center no-repeat;}

input:required:valid,select:required:valid{background:url(img/right.png) 90% center no-repeat;box-shadow:0 0 5px green;border:1px solid green;}

input:focus:invalid,select:focus:invalid{background:url(img/error.png) 90% center no-repeat;box-shadow:0 0 5px red;border:1px solid red;}

手机号

密码

确认密码

了解方式

--请选择--

选项一

选项二

选项三

function checkpwd(){

if(password.value != repassword.value){

repassword.setcustomvalidity("两次密码输入不一致哎");

}else{

repassword.setcustomvalidity("");

}

}