js有效性验证-自定义验证

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 是元素本身，

这个方法是验证当面议按钮没有被选中时，薪资的最大值和最小值，最大值不能小于最小值，

js有效性验证-自定义验证

猜你喜欢