form表单验证的第二种函数
HTML代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="util.js"></script>
<script>
//验证用户名
function valiUname(unameObj){
var val=unameObj.value;
var reg=new RegExp("^\\w{6,12}$");
var result=reg.test(val);
var unameMsg=$("#unameMsg");
if(!val){
unameMsg.innerHTML="用户名不能为空";
return false;
}else if(!result){
unameMsg.innerHTML="用户名只能由6-12位字母数字下划线组成";
return false;
}else{
unameMsg.innerHTML="";
return true;
}
}
//验证密码
function valiPwd(pwdObj){
var val=pwdObj.value;
var reg=new RegExp("^[a-zA-Z0-9]{6,12}$");
var result=reg.test(val);
var pwdMsg=$("#pwdMsg");
if(!val){
pwdMsg.innerHTML="密码不能为空";
return false;
}else if(!result){
pwdMsg.innerHTML="密码只能由6-12位字母数字下划线组成";
return false;
}else{
pwdMsg.innerHTML="";
return true;
}
}
function formSub(){
return valiUname($("uname")[0])&&valiPwd($("pwd")[0]);
}
</script>
</head>
<body>
<form action="#" method="get" name="form1" οnsubmit="return formSub()">
用户名:<input type="text" name="uname" οnchange="valiUname(this)"/>
<span id="unameMsg"></span><br/>
密码:<input type="password" name="pwd" οnchange="valiPwd(this)"/>
<span id="pwdMsg"></span><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
js代码:
/**
*
* @param idOrName 如果传入id 前面加上# 如果传入name 直接传入
* @returns {*} 返回元素节点 如果没找到 返回null
*/
function $(idOrName){
var obj=null;
if(idOrName){
if(idOrName.charAt(0)=="#"){
obj=document.getElementById(idOrName.substring(1));
}else{
obj=document.getElementsByName(idOrName);
}
}
return obj;
}
/**
*
* @param parentNode 父节点
* @returns {Array} 所有的元素子节点
*/
function getChildNodes(parentNode){
var childs=parentNode.childNodes;
var newChilds=[];
for(var i=0;i<childs.length;i++){
if(childs[i].nodeType==1){
newChilds.push(childs[i]);
}
}
return newChilds;
}
/**
*
* @param parentNode 父节点
* @returns {*|Node} 第一个元素节点
*/
function getFirstChild(parentNode){
var firstChild=parentNode.firstChild;
if(firstChild.nodeType==3){
firstChild=firstChild.nextSibling;
}
return firstChild;
}
/**
*
* @param parentNode 父节点
* @returns {*|Node} 最后一个元素节点
*/
function getLastChild(parentNode){
var lastChild=parentNode.lastChild;
if(lastChild.nodeType==3){
lastChild=lastChild.previousSibling;
}
return lastChild;
}
/**
*
* @param node 元素节点
* @returns {*|Node} 返回下一个兄弟元素节点
*/
function getNextSibling(node){
var nextNode=node.nextSibling;
if(nextNode.nodeType==3){
nextNode=nextNode.nextSibling;
}
return nextNode;
}
/**
*
* @param node 元素节点
* @returns {*|Node} 返回前一个兄弟元素节点
*/
function getPreviousSibling(node){
var preNode=node.previousSibling;
if(preNode.nodeType==3){
preNode=preNode.previousSibling;
}
return preNode;
}