表单验证和二级联动
表单验证
表单验证是我们在注册网站的时候经常用到的功能
目前支持的条件有：
-
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>