1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> <script type="text/javascript" src="jquery-3.0.0.js"></script> </head> <body> <div> 城市1:<input type="text" name="ceshi" class="eym" /><br /><br /> 城市2:<input type="text" name="ceshi" class="eym" /><br /><br /> 城市3:<input type="text" name="ceshi" class="eym" /><br /><br /> 城市4:<input type="text" name="ceshi" class="eym" /><br /><br /> 城市5:<input type="text" name="ceshi" class="eym" /><br /><br /> 城市6:<input type="text" name="ceshi" class="eym" /><br /><br /> </div> <div style=""> <input type="button" name="ceshi" value="提交" class="subcit" /> </div> <script type="text/javascript"> $(document).ready(function(){ $(".subcit").click(function(){ var city = $.trim($(".eym").val()); }); }); </script> </body> </html>
$('.eym').each(function(item)) {}
([\u4e00-\u9fa5]{2,10})这是2-10个汉字的正则表达式
function isLength(obj){
reg=[\u4e00-\u9fa5]{2,10};
if(!reg.test(obj)){
$("#test").html("<b>Please input correct figures</b>");
}else{
$("#test").html("");
}
}
var $checkArray = $("input[name='ceshi']");
if(!$checkArray)return;
for(var i=0;i<$checkArray.length;i++){
var value=$checkArray[i].value;
isLength(value);
}
怎么加上不为空的提示呢?并给出具体的哪一个错误。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
</head>
<body>
<div>
城市1:<input type="text" name="ceshi" class="eym" value="" /><br /><br />
城市2:<input type="text" name="ceshi" class="eym" value="" /><br /><br />
城市3:<input type="text" name="ceshi" class="eym" value="" /><br /><br />
城市4:<input type="text" name="ceshi" class="eym" value="" /><br /><br />
城市5:<input type="text" name="ceshi" class="eym" value="" /><br /><br />
城市6:<input type="text" name="ceshi" class="eym" value="" /><br /><br />
</div>
<div style="">
<input type="button" name="cei" value="提交" class="subcit" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".subcit").click(function(){
function isLength(obj){
var reg=/^[\u4e00-\u9fa5]{2,10}$/;
if(!reg.test(obj)){
alert('输入内容不合法');return;
}else{
alert('输入正确');
}
}
var $checkArray = $("input[name='ceshi']");
if(!$checkArray)return;
for(var i=0;i<$checkArray.length;i++){
var value=$checkArray[i].value;
isLength(value);
}
});
});
</script>
</body>
</html>
第一步,首先声明一个样式,用来做出错误提示:
1 <style type="text/css"> 2 .tip:after{content: "内容不符合要求";color: red;} 3 </style>
第二步,声明一个函数,也就是用来检测内容合不合法的函数:
1 function checkLength(){ 2 var inputs=$("input[name='ceshi']"); 3 if(inputs.length===0)return; 4 var reg=/^[\u4e00-\u9fa5]{2,10}$/; 5 $.each(inputs, function(i,o) { 6 var content=$.trim($(o).val()); 7 if(!reg.test(content)){ 8 if(!$(o).hasClass("tip")){ 9 $(o).addClass("tip"); 10 } 11 }else{ 12 if($(o).hasClass("tip")){ 13 $(o).removeClass("tip"); 14 } 15 } 16 }); 17 }
第三步,给提交按钮注册onclick事件,指向第二步的函数:
1 $(function(){ 2 $("input[name='cei']").on("click",checkLength); 3 });