使用ajax提交form表单的时候要注意把表单的数据使用 KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲testForm').seri….ajax来进行传输数据。
当然,这些通信的正常使用,要基于服务器的通信完整,才能使用,搭建好服务器来可以保持通信,才能使代码走通。
html
<form id="testForm">
姓名1<input type="text" name="sname" /> </br>
姓名2<input type="text" name="bname" /></br>
姓名3<input type="text" name="cname" class="class_cname" />
</br>
<input type="submit">
<!-- 此处的ajax提交是做ajax提交的按钮,form表单请忽略下面按钮 -->
<button id="ajaxbtn">ajax提交</button>
</form>
js
<script src="./jquery.js"></script>
<script src="./validator.js"></script>
<script>
$("#testForm").validate({
onkeyup: null, //失去焦点,进行验证
ignore: ":hidden, .ignore", //忽略验证的元素
wrapper: 'ul', //包裹错误标签的容器
errorElement: "li", //错误的标签名字
// debug: true, //测试专用属性,可以放置表单跳转
rules: { //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
sname: { //这里的sname 指的是上面标签的name属性
required: true, //必填。如果验证方法不需要参数,则配置为true
mobile: true //这里是自定义的验证规则,true标签开始匹配
},
bname: {
required: true,
mobile: true
}
},
messages: { // 验证失败的提示信息
sname: { //这里的sname 指的是上面标签的name属性
required: "专属于A的必选值" //自定义required的错误信息内容
},
cname: {
mobile: "专属于3的手机验证"
}
},
errorPlacement: function(error, element) { // 验证失败调用的函数
error.addClass("error_tip"); // 提示信息增加样式
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("label")); // 待验证的元素如果是checkbox,错误提示放到label中
} else {
error.insertAfter(element);
}
}
})
//可以以extend的形式进行也,也可以通过message的形式进行更改错误信息的内容
//这里的层级没有上面,messages的层级高,即 messages层级 > $.extend层级 > addClassRules层级
$.extend($.validator.messages, {
required: "我可以在a和b和c里面验证必选值",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
minlength: "最小长度为2",
});
//通过添加类名的方式增加条件验证信息
jQuery.validator.addClassRules({
class_cname: {
required: true,
mobile: true
}
});
//自定义验证的规则,这个得"mobile",指得是上面rule得规则,
$.validator.addMethod("mobile", function(value, element, param) {
var reg = /^1[34578]\d{9}$/; //正则表达式验证
return reg.test(value);
}, "请输入正确的手机号");
$('#ajaxbtn').click(function() {
var flag = $('#testForm').valid();
if (!flag) {
console.log('表单验证失败')
return
} else {
console.log('表单验证成功')
}
$.ajax({
type: "POST", //提交的方法
url: "http://localhost:8083/hhh", //提交的地址
data: $('#testForm').serialize(), // 序列化表单值
async: false,
error: function(request) { //失败的话
alert("Connection error");
},
success: function(data) { //成功
console.log(data) //就将返回的数据显示出来
}
})
})
</script>