代码提交整站的表单验证

1、新建html文档。

2、书写hmtl代码。

<div class="main">

    <div class="wraper">

    <h1>Validform功能示例</h1>

    <h2 class="green">使用ajax的方式提交表单</h2>

        <form class="registerform" action="demo/ajax_post.php">

            <table width="100%" style="table-layout:fixed;">

                <tr>

                    <td class="need" style="width:10px;">*</td>

                    <td style="width:70px;">昵称：</td>

                    <td style="width:205px;"><input type="text" name="name" class="inputxt" nullmsg="请输入昵称！" errormsg="昵称至少6个字符,最多18个字符！" /></td>

                    <td><div class="Validform_checktip"></div></td>

                </tr>

                <tr>

                    <td class="need">*</td>

                    <td>密码：</td>

                    <td><input type="password" name="userpassword" class="inputxt" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间！" /></td>

                    <td><div class="Validform_checktip"></div></td>

                </tr>

                <tr>

                    <td class="need">*</td>

                    <td style="width:205px;">确认密码：</td>

                    <td><input type="password" name="userpassword2" class="inputxt" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>

                    <td><div class="Validform_checktip"></div></td>

                </tr>

                <tr>

                    <td class="need"></td>

                    <td></td>

                    <td colspan="2" style="padding:10px 0 18px 0;">

                        <input type="submit" value="提 交" /> <input type="reset" value="重 置" />

                    </td>

                </tr>

            </table>

        </form>

    </div>

</div>

3、书写css代码。

.fz12 { font-size: 12px; }

input { padding: 8px 20px; }

.main { padding-bottom: 60px; }

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

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

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

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

.lireset2 { padding-left: 10px; }

.registerform { margin-bottom: 40px; }

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

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

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

.registerform textarea { height: 75px; }

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

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

.registerform select { width: 202px; }

.registerformalter select { width: 124px; }

.swfupload { vertical-align: top; }

.passwordStrength { }

.passwordStrength b { font-weight: normal; }

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

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

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

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

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

.tipmsg { padding: 0 10px; }

.footer { padding: 10px 0; }

4、书写并添加js代码。

<script src="demo/js/jquery-1.6.2.min.js"></script>

<script src="demo/js/Validform_v4.0_min.js"></script>

<script>

$(function(){

//$(".registerform").Validform();  //就这一行代码！;

$(".registerform").Validform({

ajaxPost:true,

callback:function(data){

if(data.status=="y"){

setTimeout(function(){

$.Hidemsg(); //公用方法关闭信息提示框;显示方法是$.Showmsg("message goes here.");

},2000);

}

}

});

})

</script>

5、代码整体结构。

6、查看效果。