Javascript 如何进行表单验证，并在单击按钮时以相同的脚本将表单数据发布到服务器？

我正在尝试验证表单字段，如姓名（不得为空）、电子邮件id（必须有效）、手机（必须有效）。验证信息后，我必须将表单数据发布到服务器。我尝试验证表单数据，然后单击按钮将信息发布到服务器

我的表单.html

<form class="form-horizontal" id="register-form" >
    <div class="col-lg-8">      
        <div class="fieldgroup">
            <label class="col-lg-3 control-label" for="userName">Name:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style=" height: 30px;" class="form-control" id="userName" name="userName"
                    placeholder="Full Name" value="" type="text" required>
            </div>
        </div>

        <div class="fieldgroup">
            <label for="email" class="col-lg-3 control-label">Email:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style="height: 30px;" class="form-control" name="email"
                    id="email" placeholder="you@example.com" value=""
                    type="text" required>
            </div>
        </div>

        <div class="fieldgroup">
            <label for="userContactNumber" class="col-lg-3 control-label">Mobile:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style="height: 30px; width:100%;" class="form-control" id="userContactNumber"
                    name="userContactNumber" placeholder="Mobile Number"
                    onkeypress="enableKeys(event);" maxlength="10" type="text" required>
            </div>
        </div>

        <div class="fieldgroup marg-bot-45">
            <label class="col-lg-3 control-label"></label>
                <div class="col-lg-9">
                    <a href="index.html" class="btn btn-info" id="btnBooking">Confirm
                        Booking&nbsp;<span class="glyphicon glyphicon-ok"></span>
                    </a>
                    <button type="button" class="btn btn-info"
                        onclick="javascript:clearAddress();">
                        Clear&nbsp;<span class="glyphicon glyphicon-ok"></span>
                    </button>
                </div>
        </div> 
    </div>                                  
</form>

姓名：*
电邮：*
流动电话：*
清楚的

用于验证表单的脚本

    <script type="text/javascript">
        (function($,W,D)
        {
            var JQUERY4U = {};
            JQUERY4U.UTIL =
            {
                setupFormValidation: function()
                {
                    //form validation rules
                    $("#register-form").validate({
                        rules: {
                            userName: "required",                           
                            email: {
                                required: true,
                                email: true
                            },                                              
                            userContactNumber: "required"                       

                        },
                        messages: {
                            userName: "Please enter your Name",
                            userContactNumber: "Please enter your Mobile number",                           
                            email: "Please enter a valid email address",                                            

                        },
                        submitHandler: function(form) {
                            form.submit();
                        }
                    });
                }
            }
            //when the dom has loaded setup form validation rules
            $(D).ready(function($) {
                JQUERY4U.UTIL.setupFormValidation();
            });
            })(jQuery, window, document);
    </script>

（函数（$，W，D）
{
var JQUERY4U={}；
JQUERY4U.UTIL=
{
setupFormValidation:函数（）
{
//表单验证规则
$（“#登记表”）。验证({
规则：{
用户名：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},                                              
userContactNumber:“必需”
},
信息：{
用户名：“请输入您的姓名”，
userContactNumber:“请输入您的手机号码”，
电子邮件：“请输入有效的电子邮件地址”，
},
submitHandler:函数（表单）{
表单提交（）；
}
});
}
}
//当dom加载了设置表单验证规则时
$（D）.就绪（函数（$）{
JQUERY4U.UTIL.setupFormValidation（）；
});
})（jQuery、窗口、文档）；

用于发布表单数据的脚本

<script>
    $(document).ready(function(){
    $("#btnBooking").on("click", function(e){

        // as you have used hyperlink(a tag), this prevent to redirect to another/same page
        e.preventDefault();

        // get values from textboxs 
        var uName = $('#userName').val();
        var mailId = $('#addressemailId').val();
        var mobNum = $('#userContactNumber').val();

        $.ajax({
        url:"http://192.168.1.11/services/bookService4Homes.php",
        type:"POST",
        dataType:"json",
        data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
        //type: should be same in server code, otherwise code will not run
        ContentType:"application/json",
        success: function(response){
        //alert(JSON.stringify(response));
        },
        error: function(err){
        //alert(JSON.stringify(err));
        }
        })
    });
    });
</script>

$（文档）.ready（函数（）{
$（“#btnBooking”）。在（“单击”上，函数（e）{
//由于您使用了超链接（标记），这将阻止重定向到另一个/同一个页面
e、 预防默认值（）；
//从文本框中获取值
var uName=$（'#userName'）.val（）；
var mailId=$（'#addressemailId'）.val（）；
var mobNum=$（'#userContactNumber'）.val（）；
$.ajax({
url:“http://192.168.1.11/services/bookService4Homes.php",
类型：“POST”，
数据类型：“json”，
数据：{键入：“预订”，名称：uName，电子邮件：mailId，Mob_Num:mobNum}，
//类型：在服务器代码中应相同，否则代码将不会运行
ContentType:“应用程序/json”，
成功：功能（响应）{
//警报（JSON.stringify（响应））；
},
错误：函数（err）{
//警报（JSON.stringify（err））；
}
})
});
});

Wrap

if（$（“#register form”）.valid（）{}

围绕您的ajax，仅在表单通过验证时提交表单

if($("#register-form").valid()){
     $.ajax({
        url:"http://192.168.1.11/services/bookService4Homes.php",
        type:"POST",
        dataType:"json",
        data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
        //type: should be same in server code, otherwise code will not run
        ContentType:"application/json",
        success: function(response){
            //alert(JSON.stringify(response));
        },
        error: function(err){
            //alert(JSON.stringify(err));
        }
    });
}

---

感谢您的回复，如果（$（“#登记表”）.valid（）；或者如果（$（“#注册表格”）.valid（）{}；这将不起作用，因为OP的

单击

处理程序将干扰插件的

提交程序

。请不要多次发布相同的问题。