jquery.form.js插件是一个优秀的Ajax表单插件-BFW插件库

jquery.form.js插件是一个优秀的Ajax表单插件
jquery.form.js插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax
第一步引入bfwone
第二步执行插件
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.form"], function() {
                
        

                function showRequest(formData, jqForm, options) {
                    //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
                    //jqForm:   jQuery对象，封装了表单的元素
                    //options:  options对象
                    var queryString = $.param(formData); //name=1&address=2
                    var formElement = jqForm[0]; //将jqForm转换为DOM对象
                    if(formElement.uid.value==""){
                        alert("请输入用户名");
                        return false;
                    }
                   // var address = formElement.address.value; //访问jqForm的DOM元素
                    return true; //只要不返回false，表单都会提交,在这里可以对表单元素进行验证
                };

                function showResponse(responseText, statusText) {
                    alert(responseText);
                    //dataType=xml
                  //  var name = $('name', responseXML).text();
                   // var address = $('address', responseXML).text();
                    //$("#xmlout").html(name + "  " + address);
                    //dataType=json
                    //$("#jsonout").html(data.name + "  " + data.address);
                };

        
 
                $('#reg-form').on('submit', function(e) {
                    e.preventDefault(); // <-- important
                    $(this).ajaxSubmit({
                      //  target: '#output', //把服务器返回的内容放入id为output的元素中
                        beforeSubmit: showRequest, //提交前的回调函数
                        success: showResponse, //提交后的回调函数
                        //url: url,                 //默认是form的action， 如果申明，则会覆盖
                        //type: type,               //默认是form的method（get or post），如果申明，则会覆盖
                        //dataType: "json",           //html(默认), xml, script, json...接受服务端返回的类型
                        //clearForm: true,          //成功提交后，清除所有表单元素的值
                        resetForm: true,          //成功提交后，重置所有表单元素的值
                        timeout: 3000               //限制请求的时间，当请求大于3秒后
                    });
                });
            });
        });
    </script>
</head>
<body>
    <div class="page">
        <div class="form-div">
            <form id="reg-form" action="/Page/Recom.html" method="post">
                <textarea id="output">ajax提交结果</textarea>
                <table>
                    <tr>
                        <td>用户名</td>
                        <td><input name="uid" type="text" id="uid" easyform="length:4-16;char-normal;real-time;" message="用户名必须为4—16位的英文字母或数字" easytip="disappear:lost-focus;theme:blue;" ajax-message="用户名已存在!">
                        </td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input name="psw1" type="password" id="psw1" easyform="length:6-16;" message="密码必须为6—16位" easytip="disappear:lost-focus;theme:blue;"></td>
                    </tr>
                    <tr>
                        <td>确认密码</td>
                        <td><input name="psw2" type="password" id="psw2" easyform="length:6-16;equal:#psw1;" message="两次密码输入要一致" easytip="disappear:lost-focus;theme:blue;"></td>
                    </tr>
                    <tr>
                        <td>email</td>
                        <td><input name="email" type="text" id="email" easyform="email;real-time;" message="Email格式要正确" easytip="disappear:lost-focus;theme:blue;" ajax-message="这个Email地址已经被注册过，请换一个吧!"></td>
                    </tr>
                    <tr>
                        <td>昵称</td>
                        <td><input name="nickname" type="text" id="nickname" easyform="length:2-16" message="昵称必须为2—16位" easytip="disappear:lost-focus;theme:blue;"></td>
                    </tr>
                </table>
                <div class="buttons">
                    <input value="注 册" type="submit" style="margin-right:20px; margin-top:20px;">
                    <input value="我有账号，我要登录" type="button" style="margin-right:45px; margin-top:20px;">
                </div>
                <br class="clear">
            </form>
        </div>
    </div>
    <script>
        $(document).ready(function () {});
    </script>
</body>
</html>