首页 新闻 赞助 找找看

validate.js表单验证问题

0
悬赏园豆:5 [已解决问题] 解决于 2017-08-17 23:36
<div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="clear_validate_form()"></button>
                <h4 class="modal-title">编辑实例信息</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal" method="post" id="edit_instance_meta"> {% csrf_token %}
                    <div class="form-body" id="instance_form_group">
                        <div class="form-group">
                            <label class="col-md-2 control-label">实例角色<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select  class="bs-select form-control" data-live-search="true" data-size="8" name="role" id="role_add">
                                    <option value="" disabled>请选择</option>
                                    {% for role_option in select_options.roles%}
                                        <option value="{{ role_option.role }}" >{{ role_option.role }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">实例端口<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="db_port"  id="db_port_add">
                                    <option value="" disabled>请选择</option>
                                    {% for db_port_option in select_options.db_port%}
                                        <option value="{{ db_port_option.db_port }}"  >{{ db_port_option.db_port }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>
                        <div class="form-group">
                             <label class="col-md-2 control-label">数据库类型<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="db_type" id="db_type_add">
                                    <option value="" disabled>请选择</option>
                                    {% for db_type_option in select_options.db_type%}
                                        <option value="{{ db_type_option.db_type }}">{{ db_type_option.db_type }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">数据库版本</label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="db_version" id="db_version_add">
                                    <option value="">请选择</option>
                                    {% for db_version_option in select_options.db_version%}
                                        <option value="{{ db_version_option.db_version }}">{{ db_version_option.db_version }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">

                            <label class="col-md-2 control-label">一级业务名<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="module" id="module_add">
                                    <option value="" disabled>请选择</option>
                                    {% for business_name_option in select_options.module%}
                                        <option value="{{ business_name_option.module }}">{{ business_name_option.module }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">二级业务名<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="sub_module" id="sub_module_add">
                                    <option value="" disabled>请选择</option>
                                    {% for developer_des_option in select_options.sub_module%}
                                        <option value="{{ developer_des_option.sub_module }}">{{ developer_des_option.sub_module }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">

                            <label class="col-md-2 control-label">三级业务名<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="business_name" id="business_name_add">
                                    <option value="" disabled>请选择</option>
                                    {% for business_name_option in select_options.business_name%}
                                        <option value="{{ business_name_option.business_name }}">{{ business_name_option.business_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">机房<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="machine_room" id="machine_room_add">
                                    <option value="" disabled>请选择</option>
                                    {% for options in select_options.machine_room%}
                                        <option value="{{ options.machine_room }}">{{ options.machine_room }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>
                        <div class="form-group">

                           <label class="col-md-2 control-label">三级业务中文描述<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <input name="business_name_desc" value="" class="form-control">
                            </div>
                            <label class="col-md-2 control-label">myshard节点名</label>
                            <div class="col-md-4">
                                <input name="room_num" value="" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">

                           <label class="col-md-2 control-label">myshard区域名</label>
                            <div class="col-md-4">
                                <input name="area_num" value="" class="form-control">
                            </div>
                            <label class="col-md-2 control-label">用户名<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <input name="user_name" value="" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">

                           <label class="col-md-2 control-label">用户密码</label>
                            <div class="col-md-4">
                                <input name="user_passwd" value="" class="form-control">
                            </div>
                            <label class="col-md-2 control-label">操作系统</label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="is_dbmachine" id="is_dbmachine_add">
                                    <option value="">请选择</option>
                                        <option value="0">否</option>
                                        <option value="1">是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">开发负责人<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="developer_des" multiple id="developer_des_add">
                                    <option value="">请选择</option>
                                    {% for developer_des_option in select_options.developer_des%}
                                        <option value="{{ developer_des_option }}">{{ developer_des_option }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">运维负责人<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="operator_des" multiple id="operator_des_add">
                                    <option value="">请选择</option>
                                    {% for operator_des_option in select_options.operator_des%}
                                        <option value="{{ operator_des_option }}">{{ operator_des_option }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">开发负责人英文名<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="developer" multiple="multiple" id="developer_add">
                                    <option value="">请选择</option>
                                    {% for developer_des_option in select_options.developer %}
                                        <option value="{{ developer_des_option }}">{{ developer_des_option }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">运维负责人英文名<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="operator" multiple="multiple" id="operator_add">
                                    <option value="">请选择</option>
                                    {% for operator_des_option in select_options.operator %}
                                        <option value="{{ operator_des_option }}">{{ operator_des_option }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">状态</label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="state" id="state_add">
                                    <option value="">请选择</option>
                                    {% for developer_des_option in select_options.state%}
                                        <option value="{{ developer_des_option.state }}">{{ developer_des_option.state }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">是否微会机器<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="is_weihui_machine" id="is_weihui_machine_add">
                                    <option value="">请选择</option>
                                        <option value=0>否</option>
                                        <option value=1>是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">

                           <label class="col-md-2 control-label">电信IP</label>
                            <div class="col-md-4">
                                <input name="tel_ip" value="" class="form-control" readonly>
                            </div>
                            <label class="col-md-2 control-label">联通IP</label>
                            <div class="col-md-4">
                                <input name="un_ip" value="" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">

                           <label class="col-md-2 control-label">移动ip</label>
                            <div class="col-md-4">
                                <input name="mob_ip" value="" class="form-control" readonly>
                            </div>
                            <label class="col-md-2 control-label">内网IP</label>
                            <div class="col-md-4">
                                <input name="in_ip" value="" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">管理IP</label>
                            <div class="col-md-4">
                                <input name="man_ip" value="" class="form-control" readonly>
                            </div>
                            <label class="col-md-2 control-label">登陆ip<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <input name="login_ip" value="" class="form-control" readonly>
                            </div>


                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">父节点IP</label>
                            <div class="col-md-4">
                                <input name="parent_ip" value="" class="form-control">
                            </div>
                            <label class="col-md-2 control-label">父节点端口</label>
                            <div class="col-md-4">
                                <input name="parent_port" value="" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">备份状态<span style="color: red;">*</span></label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="backup_status" id="backup_status_add">
                                    <option value="">请选择</option>
                                    <option value="0">非备份</option>
                                    <option value="1">备份</option>
                                    <option value="2">备份中</option>
                                </select>
                            </div>
                            <label class="col-md-2 control-label">重要级别</label>
                            <div class="col-md-4">
                                <select  class="bs-select form-control" data-live-search="true" data-size="8" name="importance_level" id="importance_level_add">
                                    <option value="">请选择</option>
                                        <option value=1>1</option>
                                        <option value=2>2</option>
                                        <option value=3>3</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">读写角色</label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="rw_role" id="rw_role_add">
                                    <option value="">请选择</option>
                                    <option value="rw">读写</option>
                                    <option value="r">只读</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">创建时间</label>
                            <div class="col-md-4">
                                <input name="create_time" value="" class="form-control" readonly>
                            </div>
                            <label class="col-md-2 control-label">最后修改时间</label>
                            <div class="col-md-4">
                                <input name="last_modify_time" value="" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">备注:</label>
                            <div class="col-md-10">
                                <textarea name="remarks" class="form-control"></textarea>
                            </div>
                        </div>


                    </div>
                    <!--隐藏的submit标签,submit必需放在form表单里面才能触发validate验证-->
                    <input type="submit" value="提交" id="web_modal_submit" onclick="validate_form()">
                </form>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn dark btn-outline" data-dismiss="modal" onclick="clear_validate_form()">关闭</button>
                <button type="submit" class="btn green" id="instance_edit_submit" onclick="submit_edit_instance()">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
View Code

上面是HTML代码;

下面是JS代码:

function validate_form() {

    // 手机号码验证
    jQuery.validator.addMethod("isPhone", function (value, element) {
        var length = value.length;
        return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
    }, "请正确填写您的手机号码。");

    // 电话号码验证
    jQuery.validator.addMethod("isTel", function (value, element) {
        var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号-3、4位 号码-7、8位
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的电话号码。");
    // 匹配密码,以字母开头,长度在6-12之间,必须包含数字和特殊字符。
    jQuery.validator.addMethod("isPwd", function (value, element) {
        var str = value;
        if (str.length < 6 || str.length > 18)
            return false;
        if (!/^[a-zA-Z]/.test(str))
            return false;
        if (!/[0-9]/.test(str))
            return fasle;
        return this.optional(element) || /[^A-Za-z0-9]/.test(str);
    }, "以字母开头,长度在6-12之间,必须包含数字。");

    var validator = $("#edit_instance_meta").validate({
        ignore: [],
        errorElement: 'span',
        errorClass: 'help-block',

        rules: {
            role: "required",
            db_port: "required",
            db_type: "required",
            module: "required",
            sub_module: "required",
            business_name: "required",
            machine_room: "required",
            business_name_desc: "required",
            user_name: "required",
            developer_des: "required",
            operator_des: "required",
            developer: "required",
            operator: "required",
            is_weihui_machine: "required",
            login_ip: "required",
            backup_status: "required"

        },
        /*
        messages: {
            role: "请输入登陆名",
            chinese_name: "请输入中文名",
            email: {
                required: "请输入Email地址",
                email: "请输入正确的email地址"
            },
            password: {
                required: "请输入密码",
                minlength: "密码不能小于6个字符"
            },
            confirm_password: {
                required: "请输入确认密码",
                minlength: "确认密码不能小于5个字符",
                equalTo: "两次输入密码不一致不一致"
            },
            phone: {
                required: "请输入手机号码"
            },
            tel: {
                required: "请输入座机号码"
            },
            address: {
                required: "请输入家庭地址",
                minlength: "家庭地址不能少于6个字符"
            }
        },
        //自定义错误消息放到哪里
        errorPlacement: function (error, element) {
            element.next().remove();//删除显示图标
            element.after('<span class="glyphicon form-control-feedback" aria-hidden="true"></span>');
            element.closest('.form-group').append(error);//显示错误消息提示
        },
        //给未通过验证的元素进行处理
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error has-feedback');
        },
        //验证通过的处理
        success: function (label) {
            var el = label.closest('.form-group').find("input");
            el.next().remove();//与errorPlacement相似
            el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
            label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
            label.remove();
        }
        */

        messages: {
            role: "1",
            db_port: "db_port必填",
            db_type: "db_type必填",
            module: "module必填",
            sub_module: "sub_module必填",
            business_name: "business_name必填",
            machine_room: "machine_room必填",
            business_name_desc: "business_name_desc必填",
            user_name: "user_name必填",
            developer_des: "developer_des必填",
            operator_des: "operator_des必填",
            developer: "developer必填",
            operator: "operator必填",
            is_weihui_machine: "is_weihui_machine必填",
            login_ip: "login_ip必填",
            backup_status: "backup_status必填"
        },

        //给未通过验证的元素进行处理
        highlight : function(element) {
            // 加class选择器
            $(element).closest(".col-md-4").removeClass("has-error").addClass('has-error has-feedback');
        },

        //验证通过的处理
        success : function(label) {
            // var el=label.closest('.form-group .col-md-4').find("input");
            // el.next().remove();
            // el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
            console.log("lablel>>", label);
            $(label).closest('.col-md-4').removeClass('has-error').addClass("has-feedback has-success");
            label.html("OK");
        },

        // 验证成功发起ajax请求
        submitHandler:function () {
            //验证成功发起ajax请求
                var submit_url = $("#edit_instance_meta").attr("action");
                var test = jQuery.ajax({
                    url: submit_url,   // 提交的页面
                    data: $('#edit_instance_meta').serialize(), // 从表单中获取数据
                    type: "POST",                   // 设置请求类型为"POST",默认为"GET"
                    error:function (jqXHR, textStatus, errorThrown) {
                        alert(jqXHR.responseText);
                        alert(jqXHR.status);
                    },

                    success: function(data) {
                        alert("提交成功");
                        $("#edit_instance").modal('hide');
                        validator.resetForm();
                    }
                });
        }

    });

return false;
}
View Code

还有代码:

function submit_edit_instance() {
    $("#web_modal_submit").click();
        }

// 清除因表单验证留下来的样式
function clear_validate_form() {
    $(".form-group .col-md-4").removeClass("has-success has-error");
    var validator = $("#edit_instance_meta").validate();
    validator.resetForm();  // 重置
}

 

现在的问题是,对于界面的input标签,validate.js插件可以立即判断你当前输入,并显示正确/错误的信息在界面,但对于select标签却不行,比如select标签最开始为空,是不行的(我rule写明不能为空),一点submit进行验证,这时会出现错误信息,但是如果我对select标签进行选择(选一个option),这时应该取消之前错误的信息,显示正确的信息。但是却没有,这是为啥呢??希望大佬指点下。对于input标签,没有上面的BUG.

前程明亮的主页 前程明亮 | 初学一级 | 园豆:130
提问于:2017-07-14 11:09
< >
分享
最佳答案
0

意思是你开始提交的时候select提示错误信息,然后再修改option的时候没有立即变成success吗?

收获园豆:5
mini_fan | 菜鸟二级 |园豆:301 | 2017-07-14 13:28

是的。但是input标签就没有这个问题,一开始input标签输入为空,提交则显示错误信息,你一输入,就显示成功的信息。但select就不行,很奇怪……

前程明亮 | 园豆:130 (初学一级) | 2017-07-14 14:11
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册