表单验证和二级联动

原创 2016年05月31日 19:53:21

表单验证

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

目前支持的条件有:

  • 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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

地区二级联动+input模糊查询

var TempArr=[];//存储option   $(function(){       /*先将数据存入数组*/       $("#province option").each(fun...
  • lz0410
  • lz0410
  • 2017年09月05日 17:11
  • 198

用js制作form表单验证、二级联动、登陆界面升级版

用js制作form表单验证、二级联动、登陆界面升级版 制作过程中一定要细心,很多代码写的时候需要反复检查,最后才能调试成功,本测试在火狐浏览器下均正常显示。 Tit...
  • miachen520
  • miachen520
  • 2016年07月09日 10:17
  • 364

城市二级联动json

{     "provinces": [                   {                   "name": "北京市",                   "ci...
  • birthmarkqiqi
  • birthmarkqiqi
  • 2017年03月08日 15:12
  • 2128

一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果

还记得之前我使用JavaScript来实现省市二级联动的效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(八)——使用JavaScript完成省市联动的效果!之前在注册页面上有...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2017年05月10日 20:57
  • 2596

全国城市二级联动js插件

js代码部分:/* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id...
  • hj960511
  • hj960511
  • 2016年05月10日 09:31
  • 4432

JS之全国省市二级联动

JS之全国省市二级联动
  • netuser1937
  • netuser1937
  • 2017年02月07日 16:55
  • 906

js的二级联动实现省份城市的选择

基于js的二级联动,选择省份与城市
  • WentingLeng
  • WentingLeng
  • 2017年07月15日 16:00
  • 497

jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

二级联动的实现方法还真不少,实用性也很强,这里结合一个学生信息表的实例,来分享一下我的实现过程 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询...
  • zyu67
  • zyu67
  • 2015年08月09日 09:08
  • 2610

jQuery实现二级联动下拉框

jsp页面: 技术方向* ${techDirec} ...
  • tianguobing
  • tianguobing
  • 2016年12月01日 09:34
  • 2081

web 二级联动的实现

二级联动有时我们在项目当中会遇到,所以就来记录以及分享一下。 先上个效果图吧:思路:1、首先你需要获取你主表的全部数据(也就是你需要展示的数据),就比如,你先要得到全部的省份,再根据相应的省份得到相...
  • l_blackeagle
  • l_blackeagle
  • 2017年11月20日 17:32
  • 550
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表单验证和二级联动
举报原因:
原因补充:

(最多只允许输入30个字)