注册

来源:互联网 发布:python开发网站 编辑:程序博客网 时间:2024/06/11 03:28
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style>span {color: orange;display: none;}</style><body><b>     表单, 验证用户名, 密码, 手机号用户名只包含数字,字母,下划线, 且长度不小于6位 密码长度在8到16位手机号要合法 </b><form><input id="username" type="text" /><br/><span id="usernameA">亲,用户名格式错啦~只能为字母数字下划线</span><br/><input id="password" type="password" /><br/><span id="passwordA">亲,密码格式错啦~</span><br/><input id="mobile" type="number" /><br/><span id="mobileA">亲,手机号码格式错啦~</span><br/><button onclick="submit()" id="btn" disabled="disabled">提交</button></form><script>function submit() {var usname = document.querySelector("#username").value;var p1 = /^\w{6,}$/;if(p1.test(usname)) {console.log("用户名正确");document.querySelector("#usernameA").style.display = "none";} else {console.log("亲,用户名格式错啦~");document.querySelector("#usernameA").style.display = "block";}var password = document.querySelector("#password").value;var p2 = /.{8,16}$/;if(p2.test(password)) {console.log("密码可用");document.querySelector("#passwordA").style.display = "none";} else {console.log("密码不可用");document.querySelector("#passwordA").style.display = "block";}var p3 = /^1[3|4|5|8][0-9]{9}$/;var mobile = document.querySelector("#mobile").value;if(p3.test(mobile)) {console.log("手机号码正确");document.querySelector("#mobileA").style.display = "none";} else {console.log("手机号码错误");document.querySelector("#mobileA").style.display = "block";}}document.querySelector("#mobile").onblur = function() {document.getElementById("btn").disabled = "";submit()} //在第三个失去焦点的时候,给submit()</script></body></html>

原创粉丝点击