表单验证

2017-12-10 12:43:00
admin
原创
442
<html>

         <head>

                   <title>实训:用CSS布局表单</title>

                   <style type="text/css">

                            <!--
					                 #test-error{
										 color:red;
					                 }

                                     label{

                                               float: left;

                                               width: 120px;
										       
										       text-align:right;

                                               font-weight: bold;

                                     }

                                     input, textarea{

                                               width: 120px;

                                               margin-bottom: 5px;

                                     }

                                     textarea{

                                               width: 250px;

                                               height: 150px;

                                     }

                                     .boxes{

                                               width: 1em;

                                     }

                                     #submitbutton{

                                               margin-left: 120px;

                                               margin-top: 5px;

                                               width: 90px;

                                     }

                                     br{

                                               clear: left;

                                     }

                            -->

                   </style>
<script>

var checkRegisterForm = function () {
    // TODO:
	var testError = document.getElementById("test-error");
	testError.innerHTML = "";
	var username = document.getElementById("username");
	var user = document.getElementById("user");
	var emailaddress = document.getElementById("emailaddress");
	var studentno = document.getElementById("studentno");
	var telno = document.getElementById("telno");
	var password = document.getElementById("password");
	var password2 = document.getElementById("password2");
	var terms = document.getElementById("terms");
	
	if(isNull(username.value)){
	  testError.innerHTML += "用户名不能为空<br>";
	  return false;
	}
	if(!isUsername(username.value)){
	  testError.innerHTML += "用户名必须是3-10位英文字母或数字<br>";
	  return false;
	}
	if(!ischina(user.value)){
	  testError.innerHTML += "用户中文姓名必须是2-4位中文<br>";
	  return false;
	}
	if(!isStudentNo(studentno.value)){
	  testError.innerHTML += "学号应由8位数字组成<br>";
	  return false;
	}
	if(!isTelCode(telno.value)){
	  testError.innerHTML += "电话号码应符合格式要求<br>";
	  return false;
	}
	if(!IsEmail(emailaddress.value)){
	  testError.innerHTML += "邮件地址应符合要求<br>";
	  return false;
	}
	if(!IsLenInRange(password.value,6,20)){
	  testError.innerHTML += "口令必须是6-20位<br>";
	  return false;
	}
	if(password.value!=password2.value){
	  testError.innerHTML += "两次输入口令必须一致<br>";
	  return false;
	}
	if(!terms.checked){
	  testError.innerHTML += "同意条款必须选择是<br>";
	  return false;
	}		
    return true;
}

/*字段是否为空 */ 
function isNull(str) {
	if (str == null || str == "") {
       return true;
  }
  return false;
}

/*用户名必须是3-10位英文字母或数字 */ 
function isUsername(str) {
	var reg=/^[a-zA-Z0-9]{3,10}$/; 
	return reg.test(str);
}

/*校验是否中文名称组成 */ 
function ischina(str) {
	var reg=/^[\u4E00-\u9FA5]{2,4}$/; 
	return reg.test(str);
}
			
/*校验是否全由8位数字组成 */ 
function isStudentNo(str) {
	var reg=/^[0-9]{8}$/;
	return reg.test(str);
}

/*校验电话码格式 */ 
function isTelCode(str) {
	var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
	return reg.test(str);
}

/*校验邮件地址是否合法 */ 
function IsEmail(str) {
	var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
	return reg.test(str);
}

/*字符串长度是否符合范围 */ 
function IsLenInRange(str,minLen,maxLen) {
	if(str.length>=minLen && str.length<=maxLen){
	  return true;
	}
	return false;
}			 
			 
</script>

         </head>

         <body bgcolor="#FFFFFF" text="#000000">

                   <form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
                      <p id="test-error"></p>
                            <label for="username">用&nbsp;户&nbsp;名:</label>

                            <input type="text" id="username" value="" />*<br />
                            
					                  <label for="user">姓&nbsp;&nbsp;&nbsp;&nbsp;名:</label>

                            <input type="text" id="user" value="" /><br />

                            <label for="emailaddress">电子邮箱:</label>

                            <input type="text" id="emailaddress" value="" /><br />
                                                        
                            <label for="studentno">学&nbsp;&nbsp;&nbsp;&nbsp;号:</label>

                            <input type="text" id="studentno" value="" /><br />
                                                       
                            <label for="telno">电话号码:</label>

                            <input type="text" id="telno" value="" /><br />
                                                        
                            <label for="password">口&nbsp;&nbsp;&nbsp;&nbsp;令:</label>

                            <input type="password" id="password" value="" />*<br />

                            <label for="password2">重复口令:</label>

                            <input type="password" id="password2" value="" /><br />

                            <label for="terms">是否同意条款?</label>

                            <input type="checkbox" id="terms" class="boxes" />*<br />

                            <input type="submit" name="submition" id="submitbutton" value="提交" />

                   </form>

         </body>

</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227