input标签中和validate中存在required属性的对应的input输入框设置为红色
今天公司突然提出要将页面中必填的输入框设置成红色，开始是想省事点直接到页面上在必填的输入框中加入样式，这样需要一个一个也页面的改，而且感觉写的很死！后来经过讨论决定采用一种灵活的方式加入样式。经过一天的努力终于成功找到解决办法实现代码如下，虽然代码不长但是却花费了我一天的时间，在里面我又学到了许多知识。
创新互联建站是一家专业提供莲池企业网站建设,专注与成都网站设计、网站制作、H5响应式网站、小程序制作等业务。10年已为莲池众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
通用方法代码：
/**
* 将页面中的必填选项输入框设置为红色
* @param form 表单名称
* @param validateOption 验证操作名
*/
common.requiredHint = function(form, validateOption){
/**判断validate中是否存在required属性的字段*/
if(validateOption!=null){
var myrules = validateOption.rules;
if(myrules!=null){
for(var item in myrules){
if(myrules[item].required){
$(":input[name="+item+"]",'#'+form).addClass("inputborder");
}
}
}
}
/**判断input属性中是否存在required属性*/
var inputs = $(':input','#'+form);
if(inputs!=null){
for(var i=0;i if(inputs[i].required){ $("#"+inputs[i].id).addClass("inputborder"); } } } }; 在需要设置必填提示的页面加入如下代码： common.requiredHint("updateForm",systemParamOptions); updateForm 为必填项所在表单ID。 systemParamOptions 为validate验证插件定义的规则变量。例如： var systemParamOptions = { rules: { paramName: { required:true, maxlength: 25 }, paramValue: { maxlength: 50 }, paramMemo: { maxlength: 250 } }, //设置错误信息显示到指定位置 errorPlacement: function(error, element) { element = element.parent(); common.showmassage(error, element); }, success: $.noop, submitHandler: function(form) { box.confirm("确定要执行【保存】操作？", function (data) { if (data) { $('#updateForm').ajaxPost(dataType.json,submitSuc); } }, { title: '提示信息' }); } }; 可以从以上代码中学习到一下知识点： js 中操作json对象，json对象如下 rules: { paramName: { required:true, maxlength: 25 }, paramValue: { maxlength: 50 }, paramMemo: { maxlength: 250 } } 获取对象中的信息可以通过一下的方式 1 for(var item in 对象名（rules）) 通过循环可以逐一获取属性名（例如：paramName、paramValue、paramMemo）也可以通过rules[item].required方式获取指定属性的值。 2 $(":input[name="+item+"]",'#'+form) 在指定form获取指定name 的input 对象。 3 给query对象添加样式方法.addClass("样式名称") 例如： .inputborder{ border: #CC0033 1px solid; } .addClass("inputborder")。 4 获取指定form下的input 对象。$(':input','#'+form); 5 jquery对象与dom对象的区别：var inputs = $(':input','#'+form) inputs是jquery对象。而 inputs[i].required 中的 inputs[i]就是dom 对象（即用传统js方法获取的对象）。jquery对象只能调用jquery定义的方法，不能调用dom对象的方法。同样dom对象也只能调用dom中的方法，不能调用jquery中的方法。详情请参考DOM对象与jquery对象有什么不同。
分享标题：input标签中和validate中存在required属性的对应的input输入框设置为红色
分享链接：http://hbruida.cn/article/iisejo.html
