jQuery 表单验证
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><script src=\"jquery.min.js\"></script><style type=\"text/css\">.high{color: red;}.onsuccess{font-size:small; color:green ;}.onerror{font-size:small;color: red;}</style></head><body><form action=\"#\" method=\"get\"><div class=\"int\">本人姓名：<input type=\"text\" id=\"name\" class=\"required\" /></div><div class=\"int\">起始密码：<input type=\"password\" id=\"pass1\" class=\"required\"/></div><div class=\"int\">确认密码：<input type=\"password\" id=\"pass2\" class=\"required\"/></div><div class=\"int\"><input type=\"submit\" class=\"submit\" id=\"send\" value=\"注册提交\"/></div></form><script type=\"text/javascript\">$(function(){$(\"input.required\").each(function(){$(this).parent().append(\"<strong class=\'high\'>*</strong>\");})$(\"input\").blur(function(){var $parent=$(this).parent();if($(this).is(\"#name\")){$parent.find(\".high\").remove();$parent.find(\"#msg\").remove();var name=$.trim($(this).val());if(name==\"\"||name.length<4){$parent.append(\"<span class=\'onerror\' id=\'msg\'>错误</span>\");}else{$parent.append(\"<span class=\'onsuccess\' id=\'msg\'>正确</span>\");}}if($(this).is(\"#pass1\")){$parent.find(\".high\").remove();$parent.find(\"#msg\").remove();var pass1=$.trim($(this).val());if(pass1==\"\"||pass1.length<4){$parent.append(\"<span class=\'onerror\' id=\'msg\'>错误</span>\");}else{$parent.append(\"<span class=\'onsuccess\' id=\'msg\'>正确</span>\");}}if($(this).is(\"#pass2\")){var pass1=$(\"#pass1\").val();var pass2=$.trim($(this).val());$parent.find(\".high\").remove();$parent.find(\"#msg\").remove();if(pass2==\"\"||pass2!=$.trim(pass1)){$parent.append(\"<span class=\'onerror\' id=\'msg\'>错误</span>\");}else{$parent.append(\"<span class=\'onsuccess\' id=\'msg\'>正确</span>\");}}}).keyup(function(){$(this).triggerHandler(\"blur\");}).focus(function(){$(this).triggerHandler(\"blur\");})$(\"#send\").click(function(){$(\"input.required\").trigger(\"blur\");var numerror=$(\"form .onerror\").length;if(numerror>0){return false;}else{alert(\"账户注册成功\");}})})</script></body><html>
爱站程序员基地
