您的位置：首页 > Web前端 > JQuery
JQuery学习笔记（一）

2016-11-25 01:43 239 查看
<html>
<head>
<title>实验一</title>
<script src="C:/Users/PettyKoKo/Desktop/学习/php/day_3/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="C:/Users/PettyKoKo/Desktop/学习/php/day_3/jquery-ui-1.12.1/jquery-ui.js"></script>
<link href="C:/Users/PettyKoKo/Desktop/学习/php/day_3/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function (){
$("#dp").datepicker({
dateFormat:"yy-mm-dd",
inline:true
});
});
</script>
<style type="text/css">
div{
font-size:11pt;
width：150px;
}
</style>
<script type="text/javascript">
var showdata = [] ;
var valuedata = [] ;
showdata[0] = [] ;
valuedata[0] = [] ;
showdata[0][0] = "上海";
valuedata[0][0] = "0101";
showdata[0][1] = "北京";
valuedata[0][1] = "0102";
showdata[0][2] = "广州";
valuedata[0][2] = "0103";

showdata[1] = [];
valuedata[1] = [];

showdata[1][0] = "纽约";
valuedata[1][0] = "0201";
showdata[1][1] = "华盛顿";
valuedata[1][1] = "0202";
showdata[1][2] = "加州";
valuedata[1][2] = "0203";

showdata[2] = [];
valuedata[2] = [];

showdata[2][0] = "伦敦";
valuedata[2][0] = "0301";
showdata[2][1] = "利物浦";
valuedata[2][1] = "0302";
showdata[2][2] = "伯明翰";
valuedata[2][2] = "0303";

function change(target) {
var deselect = document.getElementById("deselect");
deselect.innerHTML = null ;
var m = target.selectedIndex ;
if(m >= 0) {
for(var i = 0 ; i < showdata[m].length ; i++) {
deselect.options[i] = new Option(showdata[m][i],valuedata[m][i]);
}
deselect.options[0].selected = true ;
}
}
</script>
</head>
<body bgcolor="silver">
<h2>请输入个人详细信息</h2>
<form>
用 户 名：<input type="text" id="username" class="required"/><br/>
密     码：<input type="password" id="psd"  class="required" maxlength="6" /><br/>
确认密码：<input type="password" id="psd_1" class="required"  maxlength="6" /><br/>
性    别：<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" checked="checked" />女<br/>
籍    贯：<select id="caselect" onchange="change(this)">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="England">英国</option>
</select>
<select id="deselect">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">广州</option>
</select><br/>
Email   ：<input type="text" id="email" class="required" /><br/>
手 机 号：<input type="text" id="number"/><br/>
专业擅长:
<select id="master" size="5" multiple=true>
<option value="Windows编程">Windows编程</option>
<option value="单片机编程">单片机编程</option>
<option value="ASP.NET编程">ASP.NET编程</option>
<option value="J2EE编程">J2EE编程</option>
<option value="Java编程">Java编程</option>
<option value="C编程">C编程</option>
<option value="C++编程">C++编程</option>
</select><br/>
业余爱好：<input type="checkbox" name="like" value="足球" />足球
<input type="checkbox" name="like" value="篮球" />篮球
<input type="checkbox" name="like" value="排球" />排球
<input type="checkbox" name="like" value="唱歌" />唱歌
<input type="checkbox" name="like" value="其他" />其他<br/>
个人照片：<input type="picture" id="picture" />
<input type="button" name="button_1" value="浏览..."/><br/>
出生年月：<input type="text" id="dp"/><br/>
备注信息：<textarea id="resume" cols="50" rows="6" /></textarea><br/><br/>
         
<input type="button" value="提交" id="btn1">
   
<input type="reset" value="重填">
</form>
</body>
</html>
<script>
$("#btn1").click(function (){
var str="";
str="用户名："+$("#username").val()+"\n";
str+="密码："+$("#psd").val()+"\n";
str+="性别："+$(":radio[name='sex']:checked").val()+"\n";
var selstr="";
$("#caselect option:selected").each(function(){
selstr+=$(this).val()+" ";
});
var selstr_1="";
$("#deselect option:selected").each(function(){
selstr_1+=$(this).val()+" ";
});
str+="籍贯："+selstr+" "+selstr_1+"\n";
str+="Email："+$("#email").val()+"\n";
str+="手机号："+$("#number").val()+"\n";
selstr="";
$("#master option:selected").each(function (){
selstr+=$(this).val()+" ";
});
str+="专业擅长："+selstr+"\n";
selstr="";
$(":checkbox[name='like']:checked").each(function(){
selstr+=$(this).val()+" ";
});
str+="业余爱好："+selstr+"\n";
str+="出生年月："+$("#dp").val()+"\n";
str+="备注消息："+$("#resume").val()+"\n";
alert(str);
});

$(':input').blur(function(){
if($(this).is('#username')){
if(this.value==""||this.value.length<6||this.value.length>10){
var errorMsg="请输入至少6位且不大于10位的用户名！";
alert(errorMsg);
}
else if(!((/[a-z]$/).test(this.value))||(this.value==("wustzz"))){//正则表达式验证
alert("用户名应该全为小写字母且不能是wustzz！");
}
}
if($(this).is("#email")){
if(this.value==""||(this.value!=""&&!(/([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/).test(this.value))){
var errorMsg="请输入正确的email地址！";
alert(errorMsg);
}
}
if($(this).is("#number")){
if(this.value.length!=11||!((/[0-9]$/).test(this.value))){
alert("手机号长度应该为11位数字");
}
else if(!(this.value.substring(0,3)==("1569"))){
alert("应该以1569开头！");
}
}
});

</script>
运行效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： jquery html ASP.NET javascript
相关文章推荐
新的分享
章节导航