jQ+validate+ajax 实现前端表单验证及提交

寒假留校做了一个二手电子产品捐献网站的项目，其中有大量的表单部分
主要技术用到了第三方表单验证插件validate，本文包括一些具体表单元素的实现方法和踩过的坑

validate部分

首先导入

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

基本的思想就是：
把验证方法都写到了validform函数中，然后再在下方进行注册函数

    function validform(){
        /*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
        return $("#application-form").validate({
        rules:{
            name:"required",
            phone:{
                required:true,
                isMobile:true,
                minlength : 11,
            },
            address1:"required",
            address2:"required",
            goodsNum:{
                required:true,
                digits:true,
                min:1
            },
            mailWay:{
                required:true,

            }

        },
        messages:{
            name:"姓名不能为空",
            phone:{
                required:"电话号码不能为空",
                isMobile:"电话号码格式错误",
                minlength : "请输入11位电话号码",
            },
            address1:"地址不能为空",
            address2:"请填写详细地址",
            goodsNum:{
                required:"请填写物品数量",
                digits:"数字格式错误",
                min:"数量不能小于1"
            },
            mailWay:{
                required:"请选择邮寄方式",
            }
        }
});

}
    //注册表单验证
    $(validform());
    $("#submit-application").click(function(){
        var name = $("#name").val();
        var phone = $("#phone").val();
        var address1 = $("#address1").val();
        var address2 = $("#address2").val();
        var goodsType = $("#goodsType option:selected").val();
        var goodsNum = $("#goodsNum").val();
        var unit = $("input[name='unit']:checked").val();
        var mailWay = $("#mailWay option:selected").val();

        if(validform().form()) {
            //通过表单验证，以下编写自己的代码
            if(!document.getElementById("file1").files[0]){
                alert("请上传资质证明文件照片");
            }else if(!document.getElementById("file2").files[0]){
                alert("请上传身份证正面照片");
            }else if(!document.getElementById("file3").files[0]){
                alert("请上传身份证背面照片");
            }else{
                //AJAX!
                $.ajax({
                    type:"POST",
                    url:" ",
                    datatype:"json",
                    data:{
                        name:name,
                        
                    },
                    success:function(data){
                        alert("上传成功！\n我们将会尽快处理。您可以在个人中心查看您所有申请的项目。")
                    },
                    error:function(jqXHR){
                        alert("OOPS! 服务器出现了一个小问题："+jqXHR.status);
                    }

                })



            }
        } else {
            //校验不通过，什么都不用做，校验信息已经正常显示在表单上
            console.log("有错")
            alert("表单存在错误，请仔细检查。")
        }
    });

我把button全部换成了div，在click的时候会提交表单

---

其中特别要说明的几个地方:

1. ☎️电话号码的验证

   因为用到了正则表达式，所以直接贴了网上的一段，实际体验非常好用

       jQuery.validator.addMethod("isMobile", function(value, element) {
       var length = value.length;
       var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
       return this.optional(element) || (length == 11 && mobile.test(value));
   }, "请正确填写您的手机号码")
   // 手机号验证
   

   使用方法也很简单，只需要在phone的参数isMobile处设置为true即可。

2. select、radio 多选选中

var goodsType = $("#goodsType option:selected").val();
var unit = $("input[name='unit']:checked").val();

ajax部分

1. 一个很坑的地方，网上的大多数静态模板引用的jq库都是slim，可以理解成阉割过的，这里面是不带有ajax核心代码的
   要替换成

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

2. 在用ajax和后端交互的时候遇到了很烦人的跨域问题，以前都是后端解决，今天学到了一个vs code超强的一个功能 remote，即远程协作，把文件放到后端的服务器上之后在线改代码，爽的一批。有关这部分的文章在我的另一篇博客中。