表单 - 黑马程序员技术交流社区 - 黑马程序员IT技术论坛

<title>表单验证</title>
</head>
<body>
<script type="text/javascript">
//校验用户名方法
/*function checkUser(){
//1.获取文本框节点对象
var userNode=document.getElementsByName("user")[0];
var username=userNode.value;
var flag=false;
//alert(userNode.value);
//获取提示信息存储的节点对象
var spanNode=document.getElementById("userSpan");
//对用户名用正则表达式进行判断。要求四位字母
//创建一个正则表达式
var regex=new RegExp("^[a-zA-Z]{4}[ DISCUZ_CODE_0 ]quot;);
//if(username=="abc")
if(regex.test(username))
{
spanNode.innerHTML="用户名输入正确！".fontcolor('#ff00cc');
flag=true;
}
else{spanNode.innerHTML="用户名输入错确！".fontcolor('red');}
return flag;
}
//校验密码
function checkPsw(){
var pswNode=document.getElementsByName("psw")[0];
var pswVal=pswNode.value;
var spanNode=document.getElementById("pswSpan");
var flag=false;
var regex=new RegExp("^\\d{4}[ DISCUZ_CODE_0 ]quot;);
if(regex.test(pswVal)){
spanNode.innerHTML="用户密码输入正确".fontcolor('#ff00cc');
flag=true;
}
else{spanNode.innerHTML="用户密码输入错确".fontcolor('red');}
return flag;
}
//校验表单
function checkForm(){
if(checkUser())
{
return true;
}
return false;
}*/
//提高代码复用性
//校验文本框
function check(name,regex,spanid,okinfo,errinfo){
var val=document.getElementsByName(name)[0].value;
var spanNode=document.getElementById(spanid);
var flag=false;
if(regex.test(val)){
spanNode.innerHTML=okinfo.fontcolor('#ff00cc');
flag=true;
}
else{
spanNode.innerHTML=errinfo.fontcolor('red');
}
return flag;
}
//校验用户名
function checkUser(){
var regex=new RegExp("^[a-zA-Z]{4}[ DISCUZ_CODE_0 ]quot;);
return check("user",regex,"userSpan","用户名正确","用户名输错误");
}
//校验密码
function checkPsw(){
var regex=new RegExp("^\\d{4}[ DISCUZ_CODE_0 ]quot;);
return check("psw",regex,"pswSpan","用户密码正确","用户密码错误");
}
//确认密码
function checkRepsw(){
var flag=false;
var pswVal=document.getElementsByName("psw")[0].value;
var repswVal=document.getElementsByName("repsw")[0].value;
var span=document.getElementById("repswSpan");
if(pswVal==repswVal)
{
span.innerHTML="密码一致".fontcolor('#ff00cc');
return flag=true;
}
else{
span.innerHTML="密码不一致".fontcolor('red');
}
return flag;
}
//校验邮箱
function checkMail(){
var regex=new RegExp("^\\w+@\\w+(\\.\\w+)+[ DISCUZ_CODE_0 ]quot;);
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];
//获取所有option对象集合
var optNodes=selNode.options;
//for(var i=0;i<optNodes.length;i++){
//alert(optNodes[i].innerHTML);
//}
//获取下啦菜单中的选择国家
//aler(optNOdes[sleNode.selectedIndex].innerHTML);
//获取选择下拉菜单项的值只要不是none就可以提交，是none给提示。
var val=optNodes[selNode.selectedIndex].value;
var span=document.getElementById("selectSpan");
if(val=="none")
{
span.innerHTML="请选择国家".fontcolor("red");
flag=false;
}
return flag;
}
//提交前再次验证
function checkForm(){
if(checkUser() && checkPsw()&& checkRepsw()&& checkMail() && checkSex() && checkCountry())
{
return true;
}
return false;
}
//自定义按钮的校验
function myCheckFrom(){
//获取表单对象
var formNode=document.getElementById("formid");
if(checkUser())
{
//提交调用方法
formNode.submit();
}
}
</script>
<form id="formid" onsubmit="return checkForm()">
用户名称：<input type="text" name="user" onblur="checkUser()" />
<span id="userSpan"></span><br />
用户密码：<input type="password" name="psw" onblur="checkPsw()" />
<span id="pswSpan"></span><br />
确认密码：<input type="password" 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="selectSpan"></span><br />
<input type="submit" value="提交数据" />
<hr />
<input type="button" value="自定义提交" onclick="myCheckFrom()"/>
</form>
</body>

复制代码