<!-- 表单校验。
1,明确事件源和事件。
事件源：表单中的组件。
事件：失去焦点后，就立刻做校验，这样用户体验效果很好。
2,提示信息展示方式。
不要弹出信息，而是在组件的旁边显示文字或者图片。需要定义一个显示区域。
-->
javascript=====表单校验函数
1.验证函数
<script type="text/javascript">
/* //校验方法。 function checkUser() { var flag = false; //1,获取文本框节点对象。 var userNode = document.getElementsByName("user")[0]; var username = userNode.value; //获取提示信息存储的位置节点。 var spanNode = document.getElementById("userspan"); //对用户名进行正则表达式的判断。要求：四位字母。 //创建一个正则对象。 var regex = new RegExp("^[a-zA-Z]{4}$"); if (regex.test(username)) { spanNode.innerHTML = "用户名正确".fontcolor("green"); flag = true; } else { spanNode.innerHTML = "用户名错误".fontcolor("red"); } return flag; } //密码校验。四位数字。 function checkPsw(){ var flag = false; var passNode = document.getElementsByName("psw")[0]; var pass = passNode.value; var regex = new RegExp("^\d{4}$"); var spanNode = document.getElementById("pswspan"); if (regex.test(pass)) { spanNode.innerHTML = "密码正确".fontcolor("green"); flag = true; } else { spanNode.innerHTML = "密码错误".fontcolor("red"); } return flag; } */ //提高代码的复用性。 function check(name,regex,spanid,okinfo,errinfo){ var flag = false; var val = document.getElementsByName(name)[0].value; var spanNode = document.getElementById(spanid); if(regex.test(val)){ spanNode.innerHTML = okinfo.fontcolor("green"); flag = true; } else { spanNode.innerHTML = errinfo.fontcolor("red"); } return flag; } //校验用户名。 function checkUser(){ var regex = new RegExp("^[a-zA-Z]{4}$"); return check("user",regex,"userspan","用户名正确","用户名错 误"); } //校验密码。 function checkPsw(){ var regex = new RegExp("^\d{4}$"); return check("psw",regex,"pswspan","密码正确","密码错误"); } //校验确认密码. function checkRepsw(){ var flag = false; //1,获取密码和确认密码框的值。 var pass = document.getElementsByName("psw")[0].value; var repass = document.getElementsByName("repsw")[0].value; //2,获取span var spanNode = document.getElementById("repswspan"); //3,判断。 if(pass == repass){ spanNode.innerHTML = "密码一致".fontcolor("green"); flag = true; }else{ spanNode.innerHTML = "密码不一致".fontcolor("red"); } return flag; } //校验邮件。 function checkMail(){ var regex = new RegExp("^\w+@\w+(\.\w+)+$"); return check("mail",regex,"mailspan","邮件正确","邮件错误"); } function checkSex(){ var flag = false; //获取所有的单选按钮。 var radioNodes = document.getElementsByName("sex"); for(var x=0; x<radioNodes.length; x++){ if(radioNodes[x].checked){ flag = true; break; } } var spanNode = document.getElementById("sexspan"); if(!flag){ spanNode.innerHTML="请选择性别".fontcolor('red'); } return flag; } //校验国家。 function checkCountry(){ var flag = true; //1,获取下拉菜单对象。 var selNode = document.getElementsByName("country")[0]; //2，获取所有的option对象的集合。 var optNodes = selNode.options; //for(var x=0; x<optNodes.length; x++){ // alert(optNodes[x].innerHTML); //} //alert(optNodes[selNode.selectedIndex].innerHTML);//获取下拉菜 单中选中的国家。 //获取选择的下拉菜单项的值 只要不是none就可以提交。是none给提示。 var spanNode = document.getElementById("countryspan"); var val = optNodes[selNode.selectedIndex].value; if(val=="none"){ spanNode.innerHTML = "必须选择一个国家".fontcolor("red"); flag = false; } return flag; } function checkForm(){ if(checkUser() && checkPsw() && checkRepsw() && checkMail()&&checkSex()&&checkCountry()){ return true; } return false; }
</script>
2.表单
<body> <form id="formid" onsubmit="return checkForm()"> 用户名称：<input type="text" name="user" onblur="checkUser()" /> <span id="userspan"></span><br /> 输入密码：<input type="text" name="psw" onblur="checkPsw()" /> <span id="pswspan"></span><br /> 确认密码：<input type="text" name="repsw" onblur="checkRepsw()" /> <span id="repswspan"></span><br /> 电子邮件：<input type="text" name="mail" onblur="checkMail()" /> <span id="mailspan"></span><br /> 选择性别： <input type="radio" name="sex" value="nan" />男 <input type="radio" name="sex" value="nv" />女 <span id="sexspan"></span><br/> 选择国家： <select name="country" > <option value="none">--选择国家--</option> <option value="cn">中国</option> <option value="usa">美国</option> <option value="en">英国</option> </select> <span id="countryspan" ></span><br/> <input type="submit" value="提交数据" /> <!-- 提交按钮上默认有就提交事件，将form组件中的name和value都提交到服务器端。 --> </form> <hr> <input type="button" value="自定义提交" onclick="myCheckForm()" /> </body>