用到的事件：
oninput 在值发生变化时立马触发
oninvalID 在不符合验证的时候触发
onchange 虽然触发值会发生变化，但不是立刻触发，要鼠标失去焦点时才能触发
onfocus 在获得焦点的时候触发
效果图
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>form</style> .container{margin:100px;Font-size14pxposition relative} .itemwIDth250pxheight40px input,select20pxline-heightborder-radius 4pxborder1px solID #999color#999margin-bottom10pxpadding5px absoluteleft66px .item label0top select30px260px input[type=submit]absolute input:required,select:requiredbackgroundurl(img/star.jpg) 90% center no-repeat input:required:valID,select:required:valIDurl(img/right.png) 90% center no-repeatBox-shadow0 0 5px green1px solID green input:focus:invalID,select:focus:invalIDurl(img/error.png) 90% center no-repeat0 0 5px red1px solID red} bodydiv class="container"> form action="#"> ="item"> label for="tel">手机号labelinput type="tel" ID placeholder="请输入手机号码" required pattern="^1[0-9]{10}$" oninput="this.setCustomValIDity('')" oninvalID="this.setCustomValIDity('请输入正确手机号哈')"div="password">密码="password"="6-20位"="^[a-zA-Z0-9]\w{5,19}$"="this.setCustomValIDity('请输入正确密码哈')" onchange="checkPwd()"="repassword">确认密码="repassword"="确认密码" required oninput="choose">了解方式select name="choose" required> option value="">--请选择--option>选项一>选项二>选项三select="submit" value="提交"formscript> function checkPwd(){ if(password.value != repassword.value){ repassword.setCustomValIDity("两次密码输入不一致哎); }else{ repassword.setCustomValIDity(""); } } HTML>
总结
以上是内存溢出为你收集整理的html5表单验证美化综合案例全部内容，希望文章能够帮你解决html5表单验证美化综合案例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）