看一下这段代码！ <html> <head> <title>表单的校验</title> <script type="text/JavaScript"> //登录名 6-18位字符,必须字符开头 //密码 6-18位字符 //确认密码--密码相同 //爱好-->要求至少写一个爱好 //出生地址-->省 市 //增加按钮 var provinces=["北京","山西省","陕西省"]; var citys =[["北京"], ["太原","大同","忻州","临汾","运城"], ["西安","咸阳","宝鸡"]]; function refreshCity(){ var provinceSel = document.getElementById("province"); var citySel = document.getElementById("city"); citySel.options.length=1; var value = provinceSel.value; if(value==-1){
}else{ var index = parseInt(value); var citys1 = citys[index]; for(var i=0;i<citys1.length;i++){ var option = document.createElement("option"); var text = document.createTextNode(citys1[i]); option.appendChild(text); citySel.appendChild(option); } } }
<head>
<style type="text/css">
.chkSpan{cursor: pointer}
</style>
<script>
var chkDiv;
var timese;
var chkList;
var $ = function (id,obj) { return 'string' == typeof(id) ? (obj||document).getElementById(id) : id; };
var $$ = function (name,obj) { return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name; };
Array.prototype.contain=function(value){
if(this!=null && this.length>0){
for(var i=0;i<this.length;i++)
{
if(this[i]==value){ return true;}
}
}
return false;
};
function displayDiv(v)
{
if(v && v !=""){
try{
var checkedArray = v.split(',');
chkList = chkList||$$('input',chkDiv);
for(var i=0;i<chkList.length;i++)
{
if(chkList[i].type=='checkbox')
{
chkList[i].checked=checkedArray.contain(getNextChild(chkList[i]).innerHTML);
}
}
}catch(ex){}
}
chkDiv.style.display="block";
}
function closeDiv()
{
chkDiv.style.display="none";
}
function getCheckValue() {
chkList = chkList||$$('input',chkDiv);
var checkedArray =[];
for(var i=0;i<chkList.length;i++)
{
if(chkList[i].type=='checkbox' && chkList[i].checked) { checkedArray.push(getNextChild(chkList[i]).innerHTML); } }
timese =timese||$("timese");
timese.value=checkedArray.join(','); setTimeout(function(){ closeDiv(); },1000);
}
//获取上一个节点
function getPreviousChild(obj) {
var result = obj.previousSibling;
while(result!=null &&!result.tagName) {
result = result.previousSibling;
}
return result;
};
//获取下一个节点
function getNextChild(obj) {
var result = obj.nextSibling;
while (result!=null &&!result.tagName) {
result = result.nextSibling;
}
return result;
};
window.onload=function(){
chkDiv =chkDiv|| $('chkDiv');
chkSpanList = $$("span",chkDiv);
for(var i=0;i<chkSpanList.length;i++){
if(chkSpanList[i].className=="chkSpan"){
(function(i){
chkSpanList[i].onclick=function(){
var chk = getPreviousChild(this);
if(chk!=null) chk.checked=!chk.checked;
};
})(i);
}
}
};
</script></head>
<body>
<input type="text" id="timese" onclick="displayDiv(this.value)"><br>
<div id="chkDiv" style="position: absolute; z-index: 99999; top: 300px; width: 400px;
height: 300px; left: 200px; display: none">
<span>
<input type='checkbox' name='chk' value='a' /><span class='chkSpan'>aaaa</span></span>
<span>
<input type='checkbox' name='chk' value='b' /><span class='chkSpan'>bbbbbb</span></span>
<span>
<input type='checkbox' name='chk' value='c' /><span class='chkSpan'>ccccc</span></span>
<a href="#" onclick="getCheckValue()">确定</a><a href="#" onclick="closeDiv()">取消</a>
</div>
</body>
</html>
<html>
<head>
<title>表单的校验</title>
<script type="text/JavaScript">
//登录名 6-18位字符,必须字符开头
//密码 6-18位字符
//确认密码--密码相同
//爱好-->要求至少写一个爱好
//出生地址-->省 市
//增加按钮
var provinces=["北京","山西省","陕西省"];
var citys =[["北京"],
["太原","大同","忻州","临汾","运城"],
["西安","咸阳","宝鸡"]];
function refreshCity(){
var provinceSel = document.getElementById("province");
var citySel =
document.getElementById("city");
citySel.options.length=1;
var value = provinceSel.value;
if(value==-1){
}else{
var index = parseInt(value);
var citys1 = citys[index];
for(var i=0;i<citys1.length;i++){
var option = document.createElement("option");
var text = document.createTextNode(citys1[i]);
option.appendChild(text);
citySel.appendChild(option);
}
}
}
function f1(){
var nameMes = document.getElementById("loginNameMsg");
nameMes.style.display="";
}
function checkLoginName(){
var value = getValue("loginName");
var nameRegex=/^[a-zA-Z][\w_-]{5,17}$/;
if(nameRegex.test(value)){
getElementById("loginNameMsg").innerHTML="用户名正确";
getElementById("loginNameMsg").className="s2";
}else{
getElementById("loginNameMsg").innerHTML=" 请输入6-18位的字符,数字,_,要求必须是字符开头！";
getElementById("loginNameMsg").className="s1";
}
}
//onmouseover:鼠标指向
//onmouseout:鼠标离开
//onfoucs :获取焦点
//onblur :失去光标(焦点)
function getElementById(id){
return document.getElementById(id);
}
function getValue(id){
return document.getElementById(id).value;
}
</script>
<style>
.s1 {
color:red;
}
.s2 {
color:green;
}
</style>
</head>
<body>
<form>
<table border=1 align="center" width="80%">
<tr>
<td width="10%">登录名</td>
<td width="40%">
<input id="loginName" onfocus="f1();"
onblur="checkLoginName();">
</td>
<td width="50%">
<span id="loginNameMsg" style="display:none">
请输入6-18位的字符,数字,_,要求必须是
字符开头！
</span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input id="pwd" type="password"></td>
<td><span id="pwdMsg">
请输入6-18位的字符,数字,_
</span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input id="repwd" type="password"></td>
<td><span id="repwdMsg">
请输入确认密码
</span>
</td>
</tr>
<tr>
<td>性别</td>
<td colspan="2">
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender" >女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobbies">游泳
<input type="checkbox" name="hobbies">读书
<input type="checkbox" name="hobbies">游戏
</td>
<td>
<span id="hobbiesMsg">
请至少选择一个爱好!
</span>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province" onchange="refreshCity();">
<option value="-1">-请选择-</option>
<option value="0">北京</option>
<option value="1">山西省</option>
<option value="2">陕西省</option>
</select>
省
<select id="city">
<option>-请选择-</option>
</select>
市
</td>
<td>
<span id="addressMsg">
请至少籍贯!
</span>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交">
</td>
</tr>
</table>
</from>
</body>
</html>