js 表单有效性验证
有效性验证可以自己定义,也可以用前辈写好的一些,我这里用的是
<script
src="<%=request.getContextPath()%>/assets/js/jquery.validate.min.js"></script>
<script src="<%=request.getContextPath()%>/js/messages_cn.js"></script>
来看代码
$('#addJob').validate({
errorElement: 'lable',
onsubmit: false,
errorClass: 'help-block',
focusInvalid: false,
ignore: "",
rules: {
jobName:{
required: true,
maxlength: 100
}, jobDepartment: {
required: true,
maxlength: 100
}, recieveEmail: {
email:true
}
},
messages: {
jobName:{
required: '请填写职位名称',
maxlength: '职位名称长度不超过100位'
}, jobDepartment: {
required: '请填写所属部门',
maxlength: '所属部门长度不超过100位'
}, recieveEmail: {
required: '请填写投递邮箱',
email: '请输入合法邮箱'
}
},
highlight: function (e) {
$(e).parent().removeClass('has-info').addClass('has-error');
},
success: function (e) {
$(e).parent().removeClass('has-error');
$(e).remove();
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
submitHandler: function (form) {
},
invalidHandler: function (form) {
}
});
$('#auditTime').change(function(){
$('#addJob').validate().element($('#auditTime'));
});
jQuery.validator.addMethod("salary", function(value,element) {
var salaryMaxNum = $('input[name=salaryMax]').val() * 1;
var salaryMinNum = $('input[name=salaryMin]').val() * 1;
var validateFlag = true;
if($('#negotiable').prop('checked')==false&&salaryMaxNum<=salaryMinNum){
validateFlag = false;
}
return this.optional(element) || validateFlag;
},"请正确填写薪资范围");
});
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为{0} 的值"),
min: jQuery.validator.format("请输入一个最小为{0} 的值")
});
这是message.js里面的一些有效性判断
自己定义的验证方法就要用到validate.js里面的add方法:
jQuery.validator.addMethod("salary", function(value,element) {
var salaryMaxNum = $('input[name=salaryMax]').val() * 1;
var salaryMinNum = $('input[name=salaryMin]').val() * 1;
var validateFlag = true;
if($('#negotiable').prop('checked')==false&&salaryMaxNum<=salaryMinNum){
validateFlag = false;
}
return this.optional(element) || validateFlag;
},"请正确填写薪资范围");
这个验证的名字就是salary,这时候就可以像email,number那样直接用了。
value 是元素的值,element 是元素本身,
这个方法是验证当面议按钮没有被选中时,薪资的最大值和最小值,最大值不能小于最小值,