.formTitle{
padding-left:38px;
padding-right:11px;
float:right;
}
.formValue{
width:230px;
}
label.error {
float: right;
position: relative;
color: #ef392b;
font-size: 12px;
padding-top: 8px;
margin-bottom: -28px;
margin-right: 20px;
}
<form id="form1">
<table class="form">
<tbody><tr>
<td class="formTitle">商户名称</td>
<td class="formValue">
<div>
<input id="Name" name="Name" type="text" class="form-control" placeholder="请输入商户名称">
</div>
</td>
<td class="formTitle">商户编号</td>
<td class="formValue">
<input id="Encode" name="Encode" disabled="true" type="text" class="form-control">
</td>
</tr>
<tr>
<td class="formTitle">地区</td>
<td class="formValue">
<select id="province" name="province" style="width:110px" οnchange="select_citys(this)">
</select>
<select id="city" name="city" style="width:110px">
<option id="cityf" value="">--请选择--</option>
</select>
</td>
<td class="formTitle">详细地址</td>
<td class="formValue">
<input id="Address" name="Address" type="text" class="form-control" placeholder="请输入地址">
</td>
</tr>
<tr>
<td class="formTitle">联系人</td>
<td class="formValue">
<input id="Manager" name="Manager" type="text" class="form-control" placeholder="请输入联系人">
</td>
<td class="formTitle">手机</td>
<td class="formValue">
<input id="Mobilephone" name="Mobilephone" type="text" class="form-control" placeholder="请输入手机号">
</td>
</tr>
<tr>
<td class="formTitle">联系电话</td>
<td class="formValue">
<input id="Telephone" name="Telephone" type="text" class="form-control" placeholder="请输入电话">
</td>
<td class="formTitle">微信</td>
<td class="formValue">
<input id="Wechat" name="Wechat" type="text" class="form-control" placeholder="请输入微信号" >
</td>
</tr>
<tr>
<td class="formTitle">邮箱</td>
<td class="formValue">
<input id="Email" name="Email" type="text" class="form-control" placeholder="请输入邮箱">
</td>
<td class="formTitle">推荐码</td>
<td class="formValue">
<input id="ReferralCode" name="ReferralCode" type="text" class="form-control" placeholder="请输入推荐码" >
</td>
</tr>
<tr>
<td class="formTitle">支付宝</td>
<td class="formValue">
<input id="Alipay" name="Alipay" type="text" class="form-control" placeholder="请输入支付宝">
</td>
</tr>
<tr>
<td class="formTitle" valign="top" style="padding-top: 5px;">备注</td>
<td class="formValue" colspan="3">
<textarea id="Description" name="Description" class="form-control" style="height: 100px;"></textarea>
</td>
</tr>
</tbody></table>
<div style="text-align: center">
<button id="btn" class="btn btn-info" type="submit">保存</button>
</div>
</form>
//验证
$("#form1").validate({
rules:{
Name:{
required:true,
minlength:2,
maxlength:18
},
Address:{
required:true
},
Manager:{
required:true
},
Mobilephone:{
required:true,
isMobile:true
},
Email:{
required: false,
email: true
},
ReferralCode:{
required: true,
remote: {
url: serverWeb+"sysDepartment/isExistReferralCode", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
referralcode: function() {
return $("#ReferralCode").val();
}
}
}
},
Alipay:{
required: true
}
},
messages: {
Name:{
required: "必填",
minlength: "长度为2-18个字符",
maxlength: "长度为2-18个字符"
},
Address:{
required: "必填",
},
Manager:{
required:"必填"
},
Mobilephone:{
required:"必填",
isMobile: "格式不正确"
},
Email:{
email: "格式不正确"
},
ReferralCode:{
required:"必填",
remote: "推荐码不存在"
},
Alipay:{
required: "必填",
}
},
errorPlacement: function(error, element) { //错误信息位置设置方法
error.prependTo(element.parent()); //这里的element是录入数据的对象
},
showErrors: function(errorMap, errorList) {
this.defaultShowErrors();
for(var i = 0; i < errorList.length; i++) {
$(errorList[i].element).one("blur", function() {
$("label.error[for='" + (this.id ? this.id : this.name) + "']").remove();
});
}
},
onkeyup:false,
focusCleanup:false,
submitHandler:function(form){
if($("#province").val() == "" || $("#city").val() == ""){
layer.msg("地址必须填");
return false;
}
save();
}
});
jquery validation验证,错误提示放在input框的右边
最新推荐文章于 2022-07-05 14:26:49 发布