校验

assets/js/company-register.js

@@ -46,7 +46,107 @@ $(function(){
 	      }
 	    });
 	  })
-	 
+	//---------初始化数据部分-----------
+	var  contact_number_list=["+86","+87","+88"]
+	var  location=[{
+		icon:"🇨🇳",
+		name:"China"
+	},{
+		icon:"🇺🇸",
+		name:"USA"
+	},{
+		icon:"🇪🇸",
+		name:"Spain"
+	}
+	]
 	
+	var province=["aaa","bbb","ccc"]
+	var city=["aaa1","bbb2","ccc3"]
+	//---------初始化数据部分end-----------
+	//页面初始化
+	$(".showqu").text(contact_number_list[0])
+	contact_number_list.forEach(item=>{
+		var li=$("<li class='contact_number_li' txt="+item+"><a >"+item+"</a></li>")
+		$(".showqulist").append(li)
+	})
+	location.forEach(item=>{
+		var li=$("<li class='contact_location1_li' txt='"+item.icon+" "+item.name+"'><a >"+item.icon+' '+item.name+"</a></li>")
+		$(".showlistLocation1").append(li)
+	})
+	province.forEach(item=>{
+		var li=$("<li class='contact_location2_li' txt="+item+"><a >"+item+"</a></li>")
+		$(".showlistLocation2").append(li)
+	})
+	city.forEach(item=>{
+		var li=$("<li class='contact_location3_li' txt="+item+"><a >"+item+"</a></li>")
+		$(".showlistLocation3").append(li)
+	})
 	
+	li_click()
+	var html_contact_number=$("#contact_number").html();
+	var html_contact_email=$("#contact_email").html();
+	var html_contact_location=$("#contact_location").html();
+	
+	
+	$("#contact_number_add").click(function(){
+		$("#contact_number").append(html_contact_number)
+		li_click()
+		$("#contact_number_remove").show()
+	})
+	$("#contact_number_remove").click(function(){
+		 $("#contact_number .row-fluid").eq(-1).remove();
+		 if($("#contact_number .row-fluid").length==1){
+			 $("#contact_number_remove").hide()
+		 }
+	})
+	
+	$("#contact_email_add").click(function(){
+		$("#contact_email").append(html_contact_email)
+		li_click()
+		$("#contact_email_remove").show()
+	})
+	$("#contact_email_remove").click(function(){
+		 $("#contact_email input").eq(-1).remove();
+		 if($("#contact_email input").length==1){
+			 $("#contact_email_remove").hide()
+		 }
+	})
+	
+	
+	$("#contact_location_add").click(function(){
+		$("#contact_location").append(html_contact_location)
+		li_click()
+		$("#contact_location_remove").show()
+	})
+	$("#contact_location_remove").click(function(){
+		 $("#contact_location .row-fluid").eq(-1).remove();
+		 if($("#contact_location .row-fluid").length==1){
+			 $("#contact_location_remove").hide()
+		 }
+	})
+	
+	function li_click(){
+		$(".contact_number_li").on("click",function(){
+			$(this).parent().parent().find(".showqu").text($(this).attr("txt"))
+		})
+		$(".contact_location1_li").on("click",function(){
+			$(this).parent().parent().find(".showqu1").text($(this).attr("txt"))
+		})
+		$(".contact_location2_li").on("click",function(){
+			$(this).parent().parent().find(".showqu2").text($(this).attr("txt"))
+		})
+		$(".contact_location3_li").on("click",function(){
+			
+			$(this).parent().parent().find(".showqu3").text($(this).attr("txt"))
+		})
+	}
+	  $("#form").validate();
+		$.validator.setDefaults({
+			submitHandler: function() {
+			  alert("提交事件!");
+			}
+		});
+		
+		
+	//页面初始化end
 })

assets/js/language_validator.js

@@ -0,0 +1,66 @@
+$(function() {
+	
+	var valiobj= {
+	    required:"erq",
+	    remote: "请修正此字段",
+	    email: "请输入有效的电子邮件地址",
+	    url: "请输入有效的网址",
+	    date: "请输入有效的日期",
+	    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
+	    number: "请输入有效的数字",
+	    digits: "只能输入数字",
+	    creditcard: "请输入有效的信用卡号码",
+	    equalTo: "你的输入不相同",
+	    extension: "请输入有效的后缀",
+	    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
+	    minlength: $.validator.format("最少要输入 {0} 个字符"),
+	    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
+	    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
+	    max: $.validator.format("请输入不大于 {0} 的数值"),
+	    min: $.validator.format("请输入不小于 {0} 的数值")
+	}
+	
+	var default_value = "en";
+
+	var value = window.localStorage.getItem("i18n_default_value");
+	var sz = ["en", "zh", "ot"]
+	var szname = ["English", "Chinese", "Other"]
+	if (value) {
+		default_value = value;
+	}
+	loadProperties(default_value);
+
+	function loadProperties(val) {
+	
+		
+		jQuery.i18n.properties({ //加载资浏览器语言对应的资源文件
+			name: 'strings', //资源文件名称
+			path: '/lanhu-bootstrap/i18n/', //资源文件路径
+			mode: 'map', //用Map的方式使用资源文件中的值
+			language: val, // - 不支持  ，支持_
+			callback: function() { //加载成功后设置显示内容
+				
+				var sz=["maxlength","minlength","rangelength","range","max","min"]
+				for(var i  in valiobj){
+					console.log(i)
+					var key= $.i18n.prop("validator_"+i);
+					if(sz.indexOf(i)>-1){
+						valiobj[i]= $.validator.format(key)
+					}else{
+						valiobj[i]=key
+					}
+					
+				}
+				console.log(valiobj)
+				$.extend($.validator.messages,valiobj);
+				
+
+			}
+		});
+	}
+
+
+
+
+
+})

html/company/register.html

@@ -4,6 +4,11 @@
 		<meta charset="utf-8">
 		<title></title>
 		<script src="/lanhu-bootstrap/js/jquery-1.9.1.min.js"></script>
+		<script src="/lanhu-bootstrap/js/jquery.validate.min.js"></script>
+ 		<script src="/lanhu-bootstrap/assets/js/language_validator.js"></script>
+ 		
+		<script src="/lanhu-bootstrap/js/jquery.i18n.properties.js"></script>
+ 	
 		<link rel="stylesheet" href="/lanhu-bootstrap/css/head.css">
 		<script src="/lanhu-bootstrap/assets/js/company-register.js"></script>
 
@@ -15,7 +20,9 @@
 				$("#head").load("../head.html");
 			})
 		</script>
-		<main class="jpmain">
+		<main class="jpmain">
+			<form  id="form" >
+
 			<div class=" jpcontainer">
 				<style>
 					
@@ -101,7 +108,7 @@
 								Company name
 							</dt>
 							<dd>
-								<input type="text" placeholder="Enter company name" />
+								<input  required type="text" placeholder="Enter company name" />
 							</dd>
 
 						</dl>
@@ -114,7 +121,7 @@
 							Contact person name
 						</dt>
 						<dd>
-							<input type="text" placeholder="your name" />
+							<input required type="text" placeholder="your name" />
 						</dd>
 					</div>
 					<div class="span6">
@@ -122,7 +129,7 @@
 							Title region
 						</dt>
 						<dd>
-							<input type="text" placeholder="title region" />
+							<input required type="text" placeholder="title region" />
 						</dd>
 					</div>
 				</div>
@@ -133,40 +140,43 @@
 								<dt class="jph3">
 									Contact number
 								</dt>
-								<dd>
-									<div class="row-fluid">
-
+								<dd id="contact_number" >
+									<div class="row-fluid" style="    margin-top: 4px;" >
 
 										<div class="span4">
 											<div class="btn-group">
-												<button class="btn">+86</button> <button data-toggle="dropdown"
+												<button class="btn "><span class="showqu"></span></button> <button data-toggle="dropdown"
 													class="btn dropdown-toggle"><span class="caret"></span></button>
-												<ul class="dropdown-menu">
-													<li>
-														<a href="#">+86</a>
-													</li>
-													<li>
-														<a href="#">+87</a>
-													</li>
-													<li>
-														<a href="#">+88</a>
-													</li>
+												<ul class="dropdown-menu showqulist" >
 													
 												</ul>
 											</div>
 										</div>
 										<div class="span8">
-											<input type="text"  placeholder="enter Contact number" />
-										</div>
+											<input  required	number="true" type="text"  placeholder="enter Contact number" />
+										</div>
+										
 									</div>
 								</dd>
-								<dd>
-									<button style="
+								<dd>
+									
+									
+									<button 
+									id="contact_number_add"
+									style="
 										width: 50px;
 									    height: 50px;
 									    border: 0px;
 									background: url(/lanhu-bootstrap/assets/img/company_add_icon.png);"></button>
-
+									
+									<button
+									id="contact_number_remove"
+									style="
+										display: none;
+										width: 50px;
+									    height: 50px;
+									    border: 0px;"
+									>-</button>
 
 								</dd>
 							</div>
@@ -174,16 +184,26 @@
 								<dt class="jph3">
 									Contact Email
 								</dt>
-								<dd>
-									<input type="text" placeholder="enter email" />
+								<dd id="contact_email">
+									<input required		type="email" placeholder="enter email" style="    margin-bottom: 4px;" />
 								</dd>
 								<dd>
-									<button style="
+									<button 
+										id="contact_email_add"
+									style="
 										width: 50px;
 									    height: 50px;
 									    border: 0px;
 									background: url(/lanhu-bootstrap/assets/img/company_add_icon.png);"></button>
-
+									
+									<button
+									id="contact_email_remove"
+									style="
+										display: none;
+										width: 50px;
+									    height: 50px;
+									    border: 0px;"
+									>-</button>
 								</dd>
 							</div>
 						</div>
@@ -191,24 +211,18 @@
 				</div>
 				<div class="row-fluid">
 					<dt class="jph3">
-						Contact person name
+						Company location <img src="/lanhu-bootstrap/assets/img/SketchPng74b7bc7fc1dbb6dacaa89a92f2f5423720791305c5c272f7d4a347338c12c37f.png">
 					</dt>
-					<dd>
+					<dd id="contact_location">
+						<div class="row-fluid" style="    margin-top: 4px;" >
+						
 						<div class="span7">
 							<div class="span4">
 								<div class="btn-group">
-									<button class="btn">🇨🇳  China</button> <button data-toggle="dropdown"
+									<button class="btn"><span class="showqu1">🇨🇳  China</span></button> <button data-toggle="dropdown"
 										class="btn dropdown-toggle"><span class="caret"></span></button>
-									<ul class="dropdown-menu">
-										<li>
-											<a href="#">操作</a>
-										</li>
-										<li>
-											<a href="#">设置栏目</a>
-										</li>
-										<li>
-											<a href="#">更多设置</a>
-										</li>
+									<ul class="dropdown-menu showlistLocation1" >
+										 
 										 
 									</ul>
 								</div>
@@ -216,19 +230,10 @@
 							</div>
 							<div class="span4">
 								<div class="btn-group">
-									<button class="btn">province</button> <button data-toggle="dropdown"
+									<button class="btn"><span class="showqu2">province</span></button> <button data-toggle="dropdown"
 										class="btn dropdown-toggle"><span class="caret"></span></button>
-									<ul class="dropdown-menu">
-										<li>
-											<a href="#">操作</a>
-										</li>
-										<li>
-											<a href="#">设置栏目</a>
-										</li>
-										<li>
-											<a href="#">更多设置</a>
-										</li>
-										 
+									<ul class="dropdown-menu showlistLocation2">
+									 
 									</ul>
 								</div>
 
@@ -236,19 +241,11 @@
 							<div class="span4">
 								<div class="btn-group">
 
-									<button class="btn" style="width: 80%;">city</button> <button style="width: 20%;"
+									<button class="btn" style="width: 80%;"><span class="showqu3">city</span></button> <button style="width: 20%;"
 										data-toggle="dropdown" class="btn dropdown-toggle"><span
 											class="caret"></span></button>
-									<ul class="dropdown-menu">
-										<li>
-											<a href="#">操作</a>
-										</li>
-										<li>
-											<a href="#">设置栏目</a>
-										</li>
-										<li>
-											<a href="#">更多设置</a>
-										</li>
+									<ul class="dropdown-menu showlistLocation3">
+									 
 										
 									</ul>
 								</div>
@@ -257,16 +254,27 @@
 						</div>
 						<div class="span5"> <input type="text" placeholder="Avenue …" />
 						</div>
-
+						</div>
 					</dd>
 					<dd>
-						<button style="
-						    margin-top: 20px;
+						<button 
+						id="contact_location_add"
+						style="
+						  
 							width: 50px;
 						    height: 50px;
 						    border: 0px;
 						background: url(/lanhu-bootstrap/assets/img/company_add_icon.png);"></button>
-
+						
+						
+						<button
+						id="contact_location_remove"
+						style="
+							display: none;
+							width: 50px;
+						    height: 50px;
+						    border: 0px;"
+						>-</button>
 					</dd>
 				</div>
 				<div class="row-fluid">
@@ -309,9 +317,10 @@
 
 				</div>
 				<div class="row-fluid">
-					<button class="hbutton" style="  float: right; ">upload</button>
+					<button   type="submit" class="hbutton" style="  float: right; ">upload</button>
 				</div>
-			</div>
+			</div>
+			</form>
 		</main>
 	</body>
 </html>

html/head.html

@@ -2,7 +2,7 @@
 <script src="/lanhu-bootstrap/js/bootstrap.min.js"></script>
 <script src="/lanhu-bootstrap/js/less.min.js"></script>
 <script src="/lanhu-bootstrap/js/jquery.i18n.properties.js"></script>
-
+ 
 <script src="/lanhu-bootstrap/assets/js/language.js"></script>
 <script src="/lanhu-bootstrap/assets/js/head.js"></script>
 

i18n/strings.properties

@@ -1 +1,18 @@
 signOut=Login Out
+validator_required=This field is required.
+validator_remote=Please fix this field.
+validator_email=Please enter a valid email address.
+validator_url=Please enter a valid URL.
+validator_date=Please enter a valid date.
+validator_dateISO=Please enter a valid date ( ISO ).
+validator_number=Please enter a valid number.
+validator_digits=Please enter only digits.
+validator_extension=Please enter a valid suffix
+validator_creditcard=Please enter a valid credit card number.
+validator_equalTo=Please enter the same value again.
+validator_maxlength=Please enter no more than {0} characters.
+validator_minlength=Please enter at least {0} characters.
+validator_rangelength=Please enter a value between {0} and {1} characters long.
+validator_range=Please enter a value between {0} and {1}.
+validator_max=Please enter a value less than or equal to {0}.
+validator_min=Please enter a value greater than or equal to {0}.

i18n/strings_en.properties

@@ -1 +1,19 @@
 signOut=Login Out
+
+validator_required=This field is required.
+validator_remote=Please fix this field.
+validator_email=Please enter a valid email address.
+validator_url=Please enter a valid URL.
+validator_date=Please enter a valid date.
+validator_dateISO=Please enter a valid date ( ISO ).
+validator_number=Please enter a valid number.
+validator_digits=Please enter only digits.
+validator_extension=Please enter a valid suffix
+validator_creditcard=Please enter a valid credit card number.
+validator_equalTo=Please enter the same value again.
+validator_maxlength=Please enter no more than {0} characters.
+validator_minlength=Please enter at least {0} characters.
+validator_rangelength=Please enter a value between {0} and {1} characters long.
+validator_range=Please enter a value between {0} and {1}.
+validator_max=Please enter a value less than or equal to {0}.
+validator_min=Please enter a value greater than or equal to {0}.

i18n/strings_ot.properties

@@ -1 +1,18 @@
 signOut=xxx
+validator_required=erq
+validator_remote=请修正此字段
+validator_email= 请输入有效的电子邮件地址
+validator_url= 请输入有效的网址
+validator_date= 请输入有效的日期
+validator_dateISO= 请输入有效的日期 (YYYY-MM-DD)
+validator_number= 请输入有效的数字
+validator_digits= 只能输入数字
+validator_creditcard= 请输入有效的信用卡号码
+validator_equalTo= 你的输入不相同
+validator_extension= 请输入有效的后缀
+validator_maxlength= 最多可以输入 {0} 个字符)
+validator_minlength= 最少要输入 {0} 个字符)
+validator_rangelength= 请输入长度在 {0} 到 {1} 之间的字符串)
+validator_range= 请输入范围在 {0} 到 {1} 之间的数值)
+validator_max= 请输入不大于 {0} 的数值)
+validator_min= 请输入不小于 {0} 的数值)

i18n/strings_zh.properties

@@ -1 +1,21 @@
 signOut=退出
+
+
+
+validator_required=erq
+validator_remote=请修正此字段
+validator_email= 请输入有效的电子邮件地址
+validator_url= 请输入有效的网址
+validator_date= 请输入有效的日期
+validator_dateISO= 请输入有效的日期 (YYYY-MM-DD)
+validator_number= 请输入有效的数字
+validator_digits= 只能输入数字
+validator_creditcard= 请输入有效的信用卡号码
+validator_equalTo= 你的输入不相同
+validator_extension= 请输入有效的后缀
+validator_maxlength= 最多可以输入 {0} 个字符)
+validator_minlength= 最少要输入 {0} 个字符)
+validator_rangelength= 请输入长度在 {0} 到 {1} 之间的字符串)
+validator_range= 请输入范围在 {0} 到 {1} 之间的数值)
+validator_max= 请输入不大于 {0} 的数值)
+validator_min= 请输入不小于 {0} 的数值)