表单验证和二级联动

来源：互联网发布：java反编译编辑：程序博客网时间：2024/05/16 17:18

表单验证

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

目前支持的条件有：

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)){//失败=>提示,并返回falseaddError(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){  // 创建一个optionvar 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];//创建市的optionvar 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