1 2 3 4

validate验证

导入需要的js          自动验证

<script src="${ctx }/static/assets/js/jquery-2.1.4.min.js"></script>

<script src="${ctx }/static/assets/js/jquery.validate.min.js"></script>

jQuery(function($) {
$('#updateeditUser-form').validate({    //updateeditUser-form为form的id
errorElement: 'div',
errorClass: 'help-block',
focusInvalid: false,
ignore: "",
rules: {             //建立规则
username: {      //username为input里的id
required: true,
maxlength: 20
},
tel:{
required: true,
maxlength: 20
},
password:{
required: true,
maxlength: 20,
minlength: 5
},
password1:{
required: true,
maxlength: 20,
minlength: 5,
equalTo: "#password"
},
},

messages: {
username: {
required: "请填写员工姓名",
maxlength:"请不要填写过长的员工姓名"
},
tel:{
required: "请填写手机号,这将作为您的登陆账号供您使用",
maxlength:"请不要填写过长的手机号码"
},
password:{
required: "请填写密码",
maxlength:"密码请输入5-20个字符",
minlength:"密码请输入5-20个字符"
},
password1:{
required: "请填写密码",
maxlength:"密码请输入5-20个字符",
minlength:"密码请输入5-20个字符",
equalTo:"请确认两次密码输入一致"
}
},

highlight: function (e) {
$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},

success: function (e) {
$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
$(e).remove();
},

errorPlacement: function (error, element) {
if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
var controls = element.closest('div[class*="col-"]');
if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
}
else if(element.is('.select2')) {
error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
}
else if(element.is('.chosen-select')) {
error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
}
else error.insertAfter(element.parent());
},

submitHandler: function (form) {
form.submit();
},
invalidHandler: function (form) {
}
});

})

posted @ 2016-10-14 16:46  一缕清风丶  阅读(193)  评论(0编辑  收藏  举报