input标签中和validate中存在required属性的对应的input输入框设置为红色
更新:HHH   时间:2023-1-7


  今天公司突然提出要将页面中必填的输入框设置成红色,开始是想省事点直接到页面上在必填的输入框中加入样式,这样需要一个一个也页面的改,而且感觉写的很死!后来经过讨论决定采用一种灵活的方式加入样式。经过一天的努力终于成功找到解决办法实现代码如下,虽然代码不长但是却花费了我一天的时间,在里面我又学到了许多知识。

   通用方法代码:

       

/**

 * 将页面中的必填选项输入框设置为红色

 * @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<inputs.length;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对象有什么不同。


返回web开发教程...