自定义属性用于表单提醒
用方法控制提交
<!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>