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>
上面是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; }
还有代码：
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.
最佳答案
0
意思是你开始提交的时候select提示错误信息，然后再修改option的时候没有立即变成success吗？
收获园豆：5
是的。但是input标签就没有这个问题，一开始input标签输入为空，提交则显示错误信息，你一输入，就显示成功的信息。但select就不行，很奇怪……
