js效果之表单验证
function getLength (str) { return str.replace(/[^\x00-xff]/g,"xx").lenght; } window.onload=function() { //1. 元素选取 var ainput=getElementsByTagName(‘input‘); var oName=ainput[0]; var pwd=ainput[1]; var pwd2=ainput[2]; var ap=getElementsByTagName(‘p‘); var name_msg=ap[0]; var pwd_msg=ap[1]; var pwd_msg=ap[2]; var aCount=getElementById(‘count‘); var aEm=getElementById(‘em‘); // 正则表达式 // 数字,字母,长度 // a-zA_Z0-9_...... var re=/[^\w\u4e00-\u9fa5]/g;//匹配非法字符 // 网页交互行为与用户交互 // 用户名 // onfocus 事件在对象获得焦点时发生 oName.onfocus=function(){ name_msg.style.display=""; name_msg.innerHTML=‘输入正确的用户名!‘ } // onkeyup 事件会在键盘按键被松开时发生。 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 re=/[^\w\u4e00-\u9fa5]/g; if (re.test(this.value)) { name_msg.innerHTML=‘含有非法字符!‘; } // 不能为空 else if (this.value=="") { name_msg.innerHTML=‘内容不能为空!‘; } // 长度超过25字符 else if(name_length>25){ name_msg.innerHTML=‘长度超过25字符‘; } // 长度少于6个字符 else if (name_length<6) { name_msg.innerHTML=‘长度少于6个字符‘; } // OK else{ name_msg.innerHTML=‘ok‘; }; } }
部分代码,html,css不贴了,这是自己学习的js代码。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。