jQuery-Form Vaildation小项目.

来源：互联网发布：nginx 修改80端口编辑：程序博客网时间：2024/06/05 02:22
1.code:
<span style="font-size:14px;"><html><head><title>jQuery</title><meta charset="utf-8"><script type="text/javascript" src="http://code.jquery.com/jquery-1.12.2.min.js"></script><style>#wrapper {width:700px;height:800px;margin:10px auto;font-size:1.2em;}label {width:300px;height:50px;float:left;font-size:24px;}input {width:300px;height:50px;padding:10px;font-size:0.9em;border-radius:10px;margin-bottom:10px;}#submitButton {width:100px;height:50px;position:relative;left:300px;}#errorMessage {font-size:25px;color:red;}</style></head><body><div id="wrapper"><form id="validForm"><p id="errorMessage"></p><label for="email">Email</label><input name="email" id="email"/><label for="pho">Telephone</label><input name="pho" id="phone"/><label for="pwd">Passward</label><input name="pwd" id="pwd" type="password"/><label for="repwd">Confirm Passward</label><input name="repwd" id="repwd" type="password"/><input id="submitButton" type="submit" value="Submit"/></form></div><script type="text/javascript"> $("#validForm").submit(function(event) {var errorMessage = "";event.preventDefault();function checkEmail(str){var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;return re.test(str);}//alert($("#email").val());//验证邮箱格式if(!checkEmail($("#email").val())) {errorMessage = "<br/>please enter a valid email address!";}//验证号码是否是数字if(!$.isNumeric($("#phone").val())) {errorMessage = errorMessage + "<br/>please enter a valid telephone number!";}//验证两次密码是否一致if($("#pwd").val() != $("#repwd").val()) {errorMessage = errorMessage + "<br/> 两次密码输入不一致!";}if(errorMessage == "") {return;} else {$("#errorMessage").html(errorMessage);}});</script></body></html></span>
结果显示：
0 0