自定义属性用于表单提醒
用方法控制提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一组表单提醒</title>
<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("form input").blur(function(){
var obj=$(this);
var val=obj.val();
var reg=obj.attr("reg");
var tip=obj.attr("tip");
var regobj=new RegExp(reg);
if(!regobj.test(val)){
var spanobj=obj.next();
spanobj.html("<font color=red>"+tip+"</font>");
}else{
var spanobj=obj.next();
spanobj.html("");
}
})
$("#regist").click(function(){
//设置一个标志位
var isSubmit=true;
$("form input").each(function(){
var obj=$(this);
var reg=obj.attr("reg");
var tip=obj.attr("tip");
var val=obj.val();
var regobj=new RegExp(reg);
if(!regobj.test(val)){
var spanobj=obj.next();
spanobj.html("<font color='#FF0000'>"+tip+"</font>");
isSubmit=false;
}else{
var spanobj=obj.next();
spanobj.html("");
}
})
if(isSubmit){
//表单提交
$("#myform").submit();
}
})
})
</script>
</head>
<body>
<form id="myform" action="${pash}/demo.asp" method="post">
<p>用户名:<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
<p>密码:<input type="password" reg="^\w{5,8}$" tip="请输入5到8位数字,字母或_" /><span></span></p>
<p>用户名:<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
<p><input id="regist" type="button" value="提交" /></p>
</form>
</body>
</html>
用事件控制提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一组表单提醒</title>
<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("form input").blur(function(){
var obj=$(this);
var val=obj.val();
var reg=obj.attr("reg");
var tip=obj.attr("tip");
var regobj=new RegExp(reg);
if(!regobj.test(val)){
var spanobj=obj.next();
spanobj.html("<font color=red>"+tip+"</font>");
}else{
var spanobj=obj.next();
spanobj.html("");
}
})
// $("#regist").click(function(){
// //设置一个标志位
// var isSubmit=true;
// $("form input").each(function(){
// var obj=$(this);
// var reg=obj.attr("reg");
// var tip=obj.attr("tip");
// var val=obj.val();
// var regobj=new RegExp(reg);
// if(!regobj.test(val)){
// var spanobj=obj.next();
// spanobj.html("<font color='#FF0000'>"+tip+"</font>");
// isSubmit=false;
// }else{
// var spanobj=obj.next();
// spanobj.html("");
// }
// })
// if(isSubmit){
// //表单提交
// $("#myform").submit();
// }
//
// })
$("#myform").submit(function(){
var isSubmit=true;
$("form input").each(function(){
var obj=$(this);
var reg=obj.attr("reg");
var tip=obj.attr("tip");
var val=obj.val();
var regobj=new RegExp(reg);
if(!regobj.test(val)){
var spanobj=obj.next();
spanobj.html("<font color='#FF0000'>"+tip+"</font>");
isSubmit=false;
}else{
var spanobj=obj.next();
spanobj.html("");
}
})
return isSubmit;
})
})
</script>
</head>
<body>
<form id="myform" action="${pash}/demo.asp" method="post">
<p>用户名:<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
<p>密码:<input type="password" reg="^\w{5,8}$" tip="请输入5到8位数字,字母或_" /><span></span></p>
<p>用户名:<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
<!--<p><input id="regist" type="button" value="提交" /></p>-->
<p><input id="regist" type="submit" value="提交" /></p>
</form>
</body>
</html>