简略的反馈表单无刷新提交带验证

简单的反馈表单无刷新提交带验证

js文件可以查看源码

?

?

1. <div?id="preview"></div>??
2. ????????<div?id="formbox">???
3. ????????????<form?name="form"?id="form"?action="submit.php"?method="post">??
4. ????????????????<ul?id="ngothastyle3"?>??
5. ????????????????????<li>??
6. ????????????????????????<label>Name</label>??
7. ????????????????????????<input?type="text"?name="name"?class=""?maxlength="40"?/>??
8. ????????????????????</li>??
9. ????????????????????<li>??
10. ????????????????????????<label>Email</label>??
11. ????????????????????????<input?type="text"?name="email"?class=""?maxlength="100"?/>??
12. ????????????????????</li>??
13. ????????????????????<li>??
14. ????????????????????????<label>Message</label>??
15. ????????????????????????<textarea?name="message"?rows="5"?cols="45"?class=""></textarea>??
16. ????????????????????</li>??
17. ????????????????????<li>??
18. ????????????????????????<label>?</label>??
19. ????????????????????????<input?type="submit"?value="Submit">??
20. ????????????????????</li>??
21. ????????????????</ul>??
22. ????????????</form>?????????????
23. ?</div>???

?

1. <script?type="text/javascript">??
2. ????????????$('document').ready(function(){??
3. ??
4. ????????????$('#form').validate({??
5. ????????????????????rules:{??
6. ????????????????????????"name":{??
7. ????????????????????????????required:true,??
8. ????????????????????????????maxlength:40??
9. ????????????????????????},??
10. ??
11. ????????????????????????"email":{??
12. ????????????????????????????required:true,??
13. ????????????????????????????email:true,??
14. ????????????????????????????maxlength:100??
15. ????????????????????????},??
16. ??
17. ????????????????????????"message":{??
18. ????????????????????????????required:true??
19. ????????????????????????}},??
20. ??
21. ????????????????????messages:{??
22. ????????????????????????"name":{??
23. ????????????????????????????required:"This?field?is?required"??
24. ????????????????????????},??
25. ??
26. ????????????????????????"email":{??
27. ????????????????????????????required:"This?field?is?required",??
28. ????????????????????????????email:"Please?enter?a?valid?email?address"??
29. ????????????????????????},??
30. ??
31. ????????????????????????"message":{??
32. ????????????????????????????required:"This?field?is?required"??
33. ????????????????????????}},??
34. ??
35. ????????????????????submitHandler:?function(form){??
36. ??????????????????????$(form).ajaxSubmit({??
37. ????????target:?'#preview',???
38. ????????success:?function()?{???
39. ????????$('#formbox').slideUp('fast');???
40. ????????}???
41. ????});???
42. ??????????????
43. ????????????????????}??
44. ??????????????????
45. ????????????})??
46. ??????????????????????????
47. ????????});??
48. ????????</script>???

?

原文地址:http://www.freejs.net/article_biaodan_87.html