Jquery笔记——基本数据校验功能实现

最新推荐文章于 2024-03-12 15:59:14 发布
PettyKoKo
最新推荐文章于 2024-03-12 15:59:14 发布
阅读量269
点赞数
分类专栏：【前端】文章标签： JQuery
本文链接：https://blog.csdn.net/qq_31028891/article/details/53414448
版权
【前端】专栏收录该内容
3 篇文章 0 订阅
订阅专栏
把上次的代码优化了一下，解决了如果填写错误一直弹出提示框的问题！
<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>