寒假留校做了一个二手电子产品捐献网站的项目,其中有大量的表单部分
主要技术用到了第三方表单验证插件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的时候会提交表单
其中特别要说明的几个地方:
- ☎️电话号码的验证
因为用到了正则表达式,所以直接贴了网上的一段,实际体验非常好用
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即可。
select
、radio
多选选中
var goodsType = $("#goodsType option:selected").val();
var unit = $("input[name='unit']:checked").val();
ajax部分
- 一个很坑的地方,网上的大多数静态模板引用的jq库都是slim,可以理解成阉割过的,这里面是不带有ajax核心代码的
要替换成
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
- 在用ajax和后端交互的时候遇到了很烦人的跨域问题,以前都是后端解决,今天学到了一个vs code超强的一个功能 remote,即远程协作,把文件放到后端的服务器上之后在线改代码,爽的一批。有关这部分的文章在我的另一篇博客中。