<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
$("input[name='validate']").click(function(){
$("#msg").html("");
//获取各个输入框的值
var userName=$("input[name='userName']").val();
var email=$("input[name='email']").val();
var pass1=$("input[name='password']").val();
var pass2=$("input[name='chkPassword']").val();
//不允许出现空值
var hasValue=userName&&email&&pass1&&pass2;
if(!hasValue){
$("#msg")
.append("输入框不能为空")
.css("color","red");
return false;
}
if(userName.trim()===''){
$("#msg").append("不能是空字符或空格").css("color","red");
}else if(userName.length<=4 || userName.length>=22){
$("#msg").append("用户名在5-11字符内").css("color","red");
}
//检查两次输入密码是否完全相同
var passwordMatch=false;
if(pass1===pass2){
passwordMatch=true;
}
if(!passwordMatch){
$("#msg").append("两次密码不一致").css("color","red");
return false;
}
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/.test(email)){
$("#msg").append("邮箱输入错误").css("color","red");
}
});
$("input[name='addLocation']").click(function(){
$("body").append("<select name='stateCombo'><option>"+"选择省份</option></select>");
//禁用addLocation按钮,避免重复点击
$(this).attr("disabled","disabled");
//添加几个省名作为例子
var states=["湖北省","四川省","湖南省"];
$.each(states,function(index,value){
$("[name='stateCombo']").append("<option value='"
+ index
+ "'>"
+ value
+"</option>"
);
});
//添加一个空的<select>元素,用于城市
$("body").append("<select name='cityCombo'>"+"<option>选择城市</option></select>");
//使用on()方法,因为省下拉列表在页面加载时还不存在
$("[name='stateCombo']").change(function(e){
//获取选中省份名字,并定义城市名称数组
var selectedState=$(this).val();
var HB_City=["武汉","荆州","宜昌"];
var SC_City=["成都","宜宾","广元"];
var HN_City=["长沙","湘潭","韶关"];
var city=[];
if(selectedState==0){
city=$.extend([],HB_City);
}else if(selectedState==1){
city=$.extend([],SC_City);
}else if(selectedState==2){
city=$.extend([],HN_City);
}else{
city=['选择城市'];
}
//清除cityCombo中任何之前的值
$("[name='cityCombo']").empty();
$.each(city,function(index,value){
$("[name='cityCombo']").append("<option value='"
+index
+"'>"
+value
+"</option>"
);
});
});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="msg"></div>
<form name="userRegistrationForm">
<lable for="userName">用户名:</lable><input type="text" name="userName"><br/>
<lable for="email">邮 箱:</lable><input type="text" name="email"/><br/>
<lable for="password">密 码:</lable><input type="password" name="password"/><br/>
<lable for="chkPassword">重复密码:</lable><input type="password" name="chkPassword"/><br/>
<input type="button" name="validate" value="提交"/>
</form>
<input type="button" name="addLocation" value="选择城市"/>
</body>
</html>
jquery 简单注册表单及城市关联选择
最新推荐文章于 2023-02-24 23:36:57 发布