重点:
1、表单的提交
2、触发blur事件
3、判断是否正确,提交与否 return False
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form action="http://localhost/reg"> <p> 用户名: </p> <p> <input type="text" name="username" id="username" > <span id="username_error"></span> </p> <p> 密码: </p> <p> <input type="text" name="pwd" id="pwd"> <span id="pwd_error"></span> </p> <p> 确认密码: </p> <p> <input type="text" name="repwd" id="repwd"> <span id="repwd_error"></span> </p> <input type="submit" value="提交" /> </form> <script src="jquery.js"></script> <script> $("form").submit(function () { $("input[type='text']").trigger('blur'); total = 0; $("input[type='text']").each(function () { // total += parseInt($(this).attr("s")); total += $(this).data("s"); }); console.log(total); if(total != 3){ return false; } }); $("#username").blur(function () { var username = $(this).val(); if(username.length < 6){ $(this).data({"s":0}); $("#username_error").text("用户名小于6位").css({"color":"red"}); }else{ $(this).data({"s":1}); $("#username_error").text(""); } }); $("#pwd").blur(function () { var pwd = $(this).val(); if(pwd.length < 8){ $(this).data({"s":0}); $("#pwd_error").text("密码小于8位").css({"color":"red"}); }else{ $(this).data({"s":1}); $("#pwd_error").text(""); } }); $("#repwd").blur(function () { var pwd = $("#pwd").val(); var repwd = $(this).val(); if(pwd != repwd){ $(this).data({"s":0}); $("#repwd_error").text("两次密码不一致").css({"color":"red"}); }else{ $(this).data({"s":1}); $("#repwd_error").text(""); } }); </script> </body> </html>