使用插件实现下拉框表单验证的三种方式

我常用的实现下拉框表单验证有三种：

方法一：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 文件的引用