JQuery学习笔记(二)
2016-11-30 22:02
423 查看
把上次的代码优化了一下，解决了如果填写错误一直弹出提示框的问题！
<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
});
$(":input.required").each(function(){
var $required =$("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
});
</script>
<style type="text/css">
div{
font-size:11pt;
width：150px;
}
.formtips{width:200px;margin:2px;padding:2px;}
.onError{
padding-left:25px;
font-family:宋体;
font-size:15px;
color:red;
}
.onSuccess{
padding-left:25px;
font-family:宋体;
font-size:15px;
color:green;
}
.high{color:red;}
</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>
<div class="int">
<label>用 户 名：</label>
<input type="text" id="username" class="required"/>
</div>
<div class="int">
<label>密 码：</label>
<input type="password" id="psd" class="required" maxlength="6" />
</div>
<div>
<label>确认密码：</label>
<input type="password" id="psd_1" class="required" maxlength="6" />
</div>
<div>
<label>性 别：</label>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" checked="checked" />女
</div>
<div>
<label>籍 贯：</label>
<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>
</div>
<div>
<label>Email ：</label>
<input type="text" id="email" class="required" />
</div>
<div>
<label>手 机 号：</label>
<input type="text" id="number" class="required"/>
</div>
<div>
<label>专业擅长:</label>
<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>
</div>
<div>
<label>业余爱好：</label>
<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="其他" />其他
</div>
<div>
<label>个人照片：</label>
<input type="picture" id="picture" />
<input type="button" name="button_1" value="浏览..."/>
</div>
<div>
<label>出生年月：</label>
<input type="text" id="dp" class="required"/>
</div>
<div>
<label>备注信息：</label>
<textarea id="resume" cols="50" rows="6" /></textarea>
</div><br/>
<div>
<input type="button" value="提交" id="btn1">
<input type="reset" value="重填">
</div>
</form>
</body>
</html>
<script>
var psd_x="";
$("#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(){
var $parent=$(this).parent();
$parent.find(".formtips").remove();
if($(this).is('#username')){
if(this.value==""||this.value.length<6||this.value.length>10){
var errorMsg="请输入至少6位且不大于10位的用户名！";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}
else if(!((/[a-z]$/).test(this.value))||(this.value==("wustzz"))){//正则表达式验证
var errorMsg="用户名应该全为小写字母且不能是wustzz！";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}
else
{
var successMsg="输入格式正确！";
$parent.append('<span class="formtips onSuccess">'+successMsg+'</span>');
}
}
if($(this).is("#psd")){
if(this.value==""||(this.value!=""&&!(/[0-9]{6}$/).test(this.value))){
var errorMsg="密码应该为6为位数字!";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}
else{
psd_x=this.value;
var successMsg="输入格式正确！";
$parent.append('<span class="formtips onSuccess">'+successMsg+'</span>');
}
}
if($(this).is("#psd_1")){
if(!(this.value==psd_x)){
var errorMsg="两次密码输入不同！请重新输入确认密码！";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}
else
{
var successMsg="两次密码输入一致！";
$parent.append('<span class="formtips onSuccess">'+successMsg+'</span>');
}
}
if($(this).is("#email")){
if(this.value==""||(this.value!=""&&!(/([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/).test(this.value))){
var errorMsg="请输入正确的email地址！";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}
else
{
var successMsg="输入格式正确！";
$parent.append('<span class="formtips onSuccess">'+successMsg+'</span>');
}
}
if($(this).is("#number")){
if(this.value.length!=11||!((/[0-9]$/).test(this.value))){
var errorMsg="手机号长度应该为11位数字";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}
else if((this.value.substring(0,3)==("1569"))){
var errorMsg="手机号应该以1569开头！";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}
else
{
var successMsg="输入格式正确！";
$parent.append('<span class="formtips onSuccess">'+successMsg+'</span>');
}
}
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery学习笔记：typeof的使用
- JQuery学习笔记（四）
- jquery学习笔记-jquery结合showModalDialog实现子页面局部刷新父页面
- jQuery-show()与html()及hide()用法 学习笔记四
- jQuery-$选择器 学习笔记三
- jQuery-DOM对象和jQuery对象及转换 学习笔记二
- JQuery学习笔记（一）
- jquery学习笔记-jquery实现无刷新联动
- jQuery-hover(over,out)用法 学习笔记八
- jQuery学习笔记 08
- JQuery in Action学习笔记一
- JQuery学习笔记：this表示什么？
- jQuery学习笔记：A=A居然有用
- jquery学习笔记（二）
- jQuery学习笔记 04
- jQuery 学习笔记（七）
- jQuery学习笔记 03
- JQuery学习笔记（三）
- jQuery-text()与val()方法区别 学习笔记六
- jQuery-基础入门 学习笔记一