我常用的实现下拉框表单验证有三种:
方法一:js事件实现
使用onsubmit事件,在点击提交按钮的时候会触发该事件,如果事件的返回结果是true,则提交表单,返回false则不提交。
在该事件中,通过js获取下拉框的value,并对其进行判断,如果为空可以通过alert显示错误信息,例如“请选择一个下拉选项”,或者弹出一个div,div中设置错误信息,我常用的是layer插件,在js中直接通过代码:layer.msg(“”),即可弹出一个错误小提示。
方法二:通过bootstrapValidator实现
js代码:
$(function(){
$('form').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{
userName:{
validators:{
notEmpty:{
message:"账号不能为空"
}
}
},
departmentId:{
validators:{
notEmpty:{
message:'教师不能为空'
},
callback: {
message: '必须选择一个教师',
callback: function(value, validator) {
if (value == -1) {
return false;
}else {
return true;
}
}
}
}
}
}
});
});
在这个js 中,departmentId就是下拉框的name,通过name绑定表单中所要提交的内容,通过callback属性,绑定一个回调函数,函数中判断下拉框所选的value,最终返回true或者false。
方式三:通过validator插件实现
addMethod:name, method, message
js代码:
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
validator提供了一个自定义方法,
注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。
注意:在 messages_cn.js 文件中添加:isZipCode: “只能包括中文字、英文字母、数字和下划线”。调用前要添加对 additional-methods.js 文件的引用