js用户注册表单验证简单代码实例
分类:实例代码
分享一段代码实例,它实现了用户注册效果的验证。
比如对用户名长度验证、对于密码格式的验证,总体还是很简单的。
关于表单验证建议使用’Validate插件,具体可以参阅jQuery Validate教程板块。
代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } body { font-size: 20px; } #allcontent { width: 1024px; padding: 15px; margin: 100px auto 0; border: 1px dashed orange; } p { display: inline; margin-left: 10px; } #count { visibility: hidden; margin-left: 83px; } #em { background: orange; width: 153px; margin: 3px 0 7px 60px; } em { opacity: 0.2; display: inline-block; width: 51px; text-align: center; } em:first-child { background: orange; opacity: 1; } .active { background: orange; opacity: 1; } </style> <script> function getLength(str) { // \x00-xff代表单字节字符。 return str.replace(/[^\x00-\xff]/g, "xx").length; } function findStr(str, n) { var tmp = 0; for (var i = 0; i < str.length; i++) { if (str.charAt(i) == n) { tmp++; } } return tmp; } window.onload = function() { var aInput = document.getElementsByTagName('input'); var oName = aInput[0]; var pwd = aInput[1]; var pwd2 = aInput[2]; var aP = document.getElementsByTagName('p'); var name_msg = aP[0]; var pwd_msg = aP[1]; var pwd2_msg = aP[2]; var count = document.getElementById('count'); var aEm = document.getElementsByTagName('em'); var name_length = 0; //会员名 oName.onfocus = function() { name_msg.style.display = "inline"; name_msg.innerHTML = "<i class=‘ati’></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名。"; } oName.onkeyup = function() { count.style.visibility = "visible"; name_length = getLength(this.value); count.innerHTML = name_length + "个字符"; if (name_length == 0) { count.style.visibility = "hidden"; } } oName.onblur = function() { //含有非法字符 var reg = /[^\w\u4e00-\u9fa5]/g; // \w代表“数字、字母(不分大小写)、下划线”,\u4e00-\u9fa5代表汉字。 if (reg.test(this.value)) { name_msg.innerHTML = '<i class="err"></i>含有非法字符!'; alert(reg.test(this.value)); } //不能为空 else if (this.value == "") { name_msg.innerHTML = "<i class='err'></i>不能为空!"; } //长度超过25个字符 else if (name_length > 25) { name_msg.innerHTML = "<i class='err'></i>长度超过25个字符!"; } //长度少于6个字符 else if (name_length < 6) { name_msg.innerHTML = "<i class='err'></i>长度少于6个字符!"; } //OK else { name_msg.innerHTML = "<i class='err'></i>OK!"; count.style.visibility = "hidden"; } } //密码 pwd.onfocus = function() { pwd_msg.style.display = "inline"; pwd_msg.innerHTML = '<i class="ati"></i>6-16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号。' } pwd.onkeyup = function() { //大于5字符为“中” if (this.value.length > 5) { aEm[1].className = "active"; pwd2.removeAttribute("disabled"); pwd2_msg.style.display = "inline"; } else { aEm[1].className = ""; pwd2.setAttribute("disabled"); pwd2_msg.style.display = "none"; } //大于10字符为“强” if (this.value.length > 10) { aEm[2].className = "active"; } else { aEm[2].className = ""; } } pwd.onblur = function() { var m = findStr(pwd.value, pwd.value[0]); var reg_n = /[^\d]/g; var reg_c = /[^a-zA-Z]/g; //不能为空 if (this.value == "") { pwd_msg.innerHTML = '<i class="err"></i>不能为空!'; } //不能用相同字符 else if (m == this.value.length) { pwd_msg.innerHTML = '<i class="err"></i>不能用相同字符!'; alert(m); } //长度应为6-16个字符 else if (this.value.length < 6 || this.value.length > 16) { pwd_msg.innerHTML = '<i class="err"></i>长度应为6-16个字符!'; } //不能全为数字, else if (!reg_n.test(this.value)) { pwd_msg.innerHTML = '<i class="err"></i>不能全为数字!'; } //不能全为字母 else if (!reg_c.test(this.value)) { pwd_msg.innerHTML = '<i class="err"></i>不能全为字母!'; } //OK else { pwd_msg.innerHTML = '<i class="ok"></i>OK!'; } } //确认密码 pwd2.onblur = function() { if (this.value != pwd.value) { pwd2_msg.innerHTML = '<i class="err"></i>两次输入的密码不一致!'; alert(this.value != pwd.value); } else { pwd2_msg.innerHTML = '<i class="ok"></i>OK!'; } } } </script> </head> <body> <form id="allcontent"> <div> <label> <b>会员名:</b> <input type="text"> </label> <p>5-25个字符,一个汉字为两个字符,推荐使用中文会员名。</p> </div> <div id="count">0个字符</div> <div> <label> <b>密码:</b> <input type="text"> </label> <p>6-16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号。</p> </div> <div id="em"> <em>弱</em> <em>中</em> <em>强</em> </div> <div> <label> <b>确认密码:</b> <input type="text" disabled> </label> <p></p> </div> </form> </body> </html>
js用户注册表单验证简单代码实例,这样的场景在实际项目中还是用的比较多的,关于js用户注册表单验证简单代码实例就介绍到这了。
js用户注册表单验证简单代码实例属于前端实例代码,有关更多实例代码大家可以查看。