表单验证和二级联动

标签: JavaScript 表单验证 二级
1004人阅读 评论(0) 收藏 举报
分类:

表单验证

表单验证是我们在注册网站的时候经常用到的功能

目前支持的条件有:

  • null

  • email

  • char-normal  //英文、数字、下划线

  • char-chinese //中文、英文、数字、下划线、中文标点符号

  • char-english //英文、数字、下划线、英文标点符号

  • length:1-10  //length:4

  • equal:xxx  // 等于某个对象的值,冒号后是jq选择器语法

  • ajax:fun()

  • real-time  //实时检查

  • date      //2014-10-31

  • time      //10:30:00

  • datetime   // 2014-10-31 10:30:00

  • money     //正数,两位小数

  • uint :1   //正整数 , 参数为起始值

  • easytip    //属性是对提示框的配置,可配置属性有

  • left: 0,

  • top: 0,

  • position: "right",  //top, left, bottom, right

  • disappear: "other",   //self, other, lost-focus, none, N seconds

  • speed: "fast",

  • theme: "white",    //目前只有white、black、blue、red

  • arrow: "bottom",    //top, left, bottom, right

<!DOCTYPE html>
<html>
  <head>
    <title>表单验证.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
		<script type="text/javascript">
		//如果校验不符合规则,拦截表单的提交
			//1 用户名不能为空,并且长度在6到10位之间.只能以英文字母开头. 用户名中只能使用"_"符号.
			function fun1(){
				var flag = true;
				
				if(!checkEmail()){
				flag =  false;
				}
				
				if(!checkName()){
				flag =  false;
				}
				 alert(flag);
				 return flag;
			}
			//验证邮箱
			function checkEmail(){
			//1 获得用户输入的邮箱
				var email  = document.form1.email.value;
			//2 定义正则
				var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
			//3 校验
			if(!reg.test(email)){
				//失败=>提示,并返回false
				addError(document.form1.email,"邮箱不符合规则!");
					return false;//拦截表单提交
			}else{
				removeError(document.form1.email);
				return true;
			}
			
			}
			//验证用户名
			function checkName(){
			//1 获得文本输入框中的内容
					//var nameInput= 	document.getElementsByName("name")[0];
					var nameInput = document.form1.name;
					
					//var name = nameInput.getAttribute("value");
					var name = nameInput.value;  //DHTML属性 
				//2 定义正则表达式对象
				var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
				//3 校验
				if(!reg.test(name)){
					//校验失败=> 提示用户. 
					//alert("用户需要6到10位,不能以数字开头!");
					addError(nameInput,"用户需要6到10位,不能以数字开头!");
					return false;//拦截表单提交
				}else{
					//验证成功=>清除错误信息
					removeError(nameInput);
					return true;
				}
				}
				//添加错误
				//参数1 : 标识往那里添加
				//参数2 : 错误信息是什么
				function addError(where,what){
						where.nextSibling.innerHTML=what;
				}
				//清除错误
				function removeError(where){
					where.nextSibling.innerHTML="";
				}
		</script>
  </head>
  
  <body>
   		<form action="" name="form1"  onsubmit="return fun1();"   >
   			<table border="1" width="30%" >
   				<tr>
					<th colspan="2" align="center" >
						用户注册
					</th>
				</tr>   
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="name"  onblur="checkName();" /><font color="red" ></font></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" name="email" /><font color="red" ></font></td>
				</tr>     
				<tr>
					<td colspan="2" align="center" >
						<input type="submit" value="提交" />
					</td>
				</tr>   			
   			</table>
   		</form>
  </body>
</html>

二级联动

<!DOCTYPE html>
<html>
  <head>
    <title>二级联动.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript">
		//json对象
		// 相当于java当中的map
		/* 
		var json = {"name":"tom","age":18};
		
		//遍历json对象的键
		
		for(var key in json){  
			//alert(key);
			
			alert(key+"==>"+json[key])
		}
		 */
		//---------------------------------------------------------
		
		var json = {"河北省":["石家庄","廊坊","沧州"],
			   "山西省":["太原","大同","运城"],
			   "黑龙江省":["哈尔滨","齐齐哈尔","佳木斯"]};
		
		
		// 初始化省的下拉选
		function fun1(){
			//1 获得省的select对象
			var province = document.getElementById("province");
			//2 遍历json的所有键
			for(var key in json){  
				// 创建一个option
				var option = document.createElement("option");
				option.innerHTML = key; // <option>河北省</option>
				// 将option添加到select中
				province.appendChild(option);
			}
		}
		
		function fun2(){
			//1 获得市的select对象
			var province = document.getElementById("province");
			var city = document.getElementById("city");
			//2 清空市级下拉选的数据
			city.length =1; 
			//3 获得用户选择的省
			if(!province.selectedIndex){
			//用户选择的是提示选项=>什么也不做
			return;
			}
			var options = province.options;
			var pName = options[province.selectedIndex].innerHTML;
			//4 从json中根据省获得 省下的市数据
			var cities = json[pName];
			//5 遍历市级的数组
			for(var i = 0 ; i<cities.length;i++){
			var cityName = cities[i];
				//创建市的option
				var option = document.createElement("option");
				option.innerHTML = cityName; 
				// 将option添加到select中
				city.appendChild(option);
			}
		}
		
	</script>
  </head>
  <body onload="fun1();" >
  	<select id="province" onchange="fun2();" >
  		<option>---请选择省---</option>
  	</select>
  	<select id="city" >
  		<option>---请选择市---</option>
  	</select>
  </body>
</html>


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:112446次
    • 积分:3485
    • 等级:
    • 排名:第9517名
    • 原创:221篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    博客专栏
    JAVA_SE

    文章:24篇

    阅读:20967