1.js引用顺序问题
需要先引入jquery.js,再引入jquery.validate.js才会生效
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.js"></script>
2.js冲突
一个页面上引入了多个js文件,可能会有不同版本的js冲突问题
3.form表单问题
1)使用form的action提交表单,暂时还未出现过问题
2)使用ajax提交表单
需要使用input=submit,不能使用button或者其他标签,否则会造成验证不生效并且submitHandler也不执行的效果
代码示列
html部分:
<form action="addUserAddress" method="post" id="newAddressForm">
<div class="am-form-group">
<label for="receiverName" class="am-form-label">收货人</label>
<div class="am-form-content">
<input type="text" id="receiverName" placeholder="收货人" name="receiverName"/>
</div>
</div>
<div class="am-form-group">
<label for="receiverPhone" class="am-form-label">手机号码</label>
<div class="am-form-content">
<input id="receiverPhone" placeholder="手机号必填" type="text" name="receiverPhone"/>
</div>
</div>
<div class="am-form-group">
<label for="user-address" class="am-form-label">所在地</label>
<div class="am-form-content address" id ="user-address">
<select data-am-selected id="receiverCity" name="receiverCity"/>
</select>
<select data-am-selected id="receiverDistrict" name="receiverDistrict"/>
</select>
<select data-am-selected id="receiverState" name="receiverState"/>
</select>
</div>
</div>
<div class="am-form-group">
<label for="receiverAddress" class="am-form-label">详细地址</label>
<div class="am-form-content">
<textarea rows="3" id="receiverAddress" placeholder="输入详细地址" name="receiverAddress"></textarea>
<small>100字以内写出你的详细地址...</small>
</div>
</div>
<div class="am-form-group">
<div class="am-u-sm-9 am-u-sm-push-3">
<input type="submit" class="am-btn am-btn-danger save" value="保存">
<a href="javascript: void(0)" class="am-close am-btn am-btn-danger">取消</a>
</div>
</div>
</form>
/***
* jquery.validate.js添加电话号码校验
*/
$(function () {
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));
}, "请正确填写手机号码");
})
/*添加新地址*/
$(".save").on("click",function(){
var addressId = $("input[name='addressId']").val();
//校验添加的地址内容
$("#newAddressForm").validate({
//一失去焦点就校验
onfocusout: function (element) {
$(element).valid();
},
errorClass: "red",
rules: {
receiverName: {
required:true
},
receiverPhone: {
required:true,
isMobile: true
},
receiverCity:{
required:true
},
receiverDistrict:{
required:true
},
receiverState:{
required:true
},
receiverAddress:{
required:true
}
},
messages: {
receiverName: "请输入收货人姓名",
receiverPhone: {
required: "请输入收货手机号"
},
receiverCity: {
required: "请选择收货省份"
},
receiverDistrict: {
required: "请选择收货区域"
},
receiverState:{
required: "请选择收货城市"
},
receiverAddress:{
required: "请输入详细地址"
}
},
submitHandler:function() {
$.ajax({
type: 'post',
url: 'addUserAddress',
data: $("#newAddressForm").serialize(),
dataType: "json",
success: function (data) {
layui.use('layer', function () {
var layer = layui.layer;
if (data.code == 200) {
layer.msg(data.message, {icon: 1}, 1000);
//刷新页面*/
setTimeout(function () {
//修改不执行刷新页面操作
window.location.href="toEditAddress";
if(addressId != undefined){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}
},1000);
} else {
layer.msg(data.message, {icon: 2}, 1000);
}
});
},
beforeSend: function(xhr){
xhr.setRequestHeader(header, token);
},
error: function(){
alert("内部错误");
}
});
}
});