你们好，最近小艾特发现有诸多的小伙伴们对于表单验证主要是验证输入的内容是否符合要求，表单验证这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、 创建新的html文档。

2、 写hmtl代码。

3、 div class='main'

4、 div class='wraper'

5、 h1有效形式函数示例/h1

6、 H2用ajax /h2提交表单

7、 form class='registerform' action='demo/ajax_post.php'

8、 table width='100%' style='table-layout:fixed;'

9、 tr

10、 td class='need' style='width:10px;'*/td

11、 TD style=' width:70px；'昵称：/td

12、 TD style=' width:205 px；'' input type=' text ' name=' name ' class=' input XT ' nullmsg='请输入昵称!'errormsg='昵称至少6个字符，最多18个字符!'//td

13、 tddiv class='Validform_checktip'/div/td

14、 /tr

15、 tr

16、 td class='need'*/td

17、 Td密码：/td

18、 TD input type=' password ' name=' user password ' class=' input XT ' nullmsg='请设置密码!'errormsg='密码范围在6~16位之间!'//td

19、 tddiv class='Validform_checktip'/div/td

20、 /tr

21、 tr

22、 td class='need'*/td

23、 TD style=' width:205 px；'确认密码：/td

24、 TD输入type=' password ' name=' user password 2 ' class=' input XT ' recheck=' user password ' nullmsg='请再输入一次密码!'errormsg='您两次输入的账号密码不一致!'//td

25、 tddiv class='Validform_checktip'/div/td

26、 /tr

27、 tr

28、 td class='need'/td

29、 td/td

30、 td colspan='2' style='padding:10px 0 18px 0;'

31、 Input type=' Submit' value=' Submit/input type='reset' value=' Reset'/

32、 /td

33、 /tr

34、 /table

35、 /form

36、 /div

37、 /div

38、 写css代码。

39、 .fz12 { font-size: 12px; }

40、 input { padding: 8px 20px; }

41、 .main { padding-bottom: 60px; }

42、 .main h1,main h2,main h3 { padding-left: 10px; }

43、 .main h1 { text-align: center; color: #212222; font-family: 'microsoft yahei'; font-size: 36px; font-weight: normal; line-height: 2em; margin-bottom: 36px; }

44、 .main h2 { background-color: #eee; line-height: 2!important; }

45、 .main h3 { font-size: 20px; margin-bottom: 10px; }

46、 .lireset2 { padding-left: 10px; }

47、 .registerform { margin-bottom: 40px; }

48、 .registerform .need { width: 10px; color: #b20202; }

49、 .registerform td { padding: 5px 0; vertical-align: top; text-align: left; }

50、 .registerform .inputxt,registerform textarea { border: 1px solid #a5aeb6; width: 196px; padding: 2px; }

51、 .registerform textarea { height: 75px; }

52、 .registerform label { margin: 0 15px 0 4px; }

53、 .registerform .tip { line-height: 20px; color: #5f6a72; }

54、 .registerform select { width: 202px; }

55、 .registerformalter select { width: 124px; }

56、 .swfupload { vertical-align: top; }

57、 .passwordStrength { }

58、 .passwordStrength b { font-weight: normal; }

59、 .passwordStrength b,passwordStrength span { display: inline-block; vertical-align: middle; line-height: 14px; height: 16px; }

60、 .passwordStrength span { width: 45px; text-align: center; background-color: #d0d0d0; border-right: 1px solid #fff; }

61、 .passwordStrength .last { border-right: none; }

62、 .passwordStrength .bgStrength { color: #fff; background-color: #71b83d; }

63、 #demo1 .passwordStrength { margin-left: 8px; }

64、 .tipmsg { padding: 0 10px; }

65、 .footer { padding: 10px 0; }

66、 编写并添加js代码。

67、 script src='demo/js/jquery-1.6.2.min.js'/script

68、 script src='demo/js/Validform_v4.0_min.js'/script

69、 script

70、 $(function(){

71、 //$('注册表格式).有效格式()；//就这一行代码！

72、 $('.registerform').Validform({

73、 ajaxPost:true,

74、 callback:function(data){

75、 if(data.status=='y'){

76、 setTimeout(function(){

77、 $.hidemsg()；public方法关闭消息提示框；显示方法是$。Showmsg('此处显示消息。');

78、 },2000);

79、 }

80、 }

81、 });

82、 })

83、 /script

84、 代码的整体结构。

85、 检查效果。

以上就是表单验证这篇文章的一些介绍，希望对大家有所帮助。