input標(biāo)簽中和validate中存在required屬性的對(duì)應(yīng)的input輸入框設(shè)置為紅色

  今天公司突然提出要將頁面中必填的輸入框設(shè)置成紅色，開始是想省事點(diǎn)直接到頁面上在必填的輸入框中加入樣式，這樣需要一個(gè)一個(gè)也頁面的改，而且感覺寫的很死！后來經(jīng)過討論決定采用一種靈活的方式加入樣式。經(jīng)過一天的努力終于成功找到解決辦法實(shí)現(xiàn)代碼如下，雖然代碼不長(zhǎng)但是卻花費(fèi)了我一天的時(shí)間，在里面我又學(xué)到了許多知識(shí)。

   通用方法代碼：

/**

 * 將頁面中的必填選項(xiàng)輸入框設(shè)置為紅色

 * @param form  表單名稱

 * @param validateOption  驗(yàn)證操作名

 */

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");

}

}  

}

};

在需要設(shè)置必填提示的頁面加入如下代碼：

common.requiredHint("updateForm",systemParamOptions);

updateForm 為必填項(xiàng)所在表單ID。

systemParamOptions 為validate驗(yàn)證插件定義的規(guī)則變量。例如：

var systemParamOptions = {

rules: {

paramName: {

required:true,

maxlength: 25

},

paramValue: {

maxlength: 50

},

paramMemo: {

maxlength: 250

}

},

//設(shè)置錯(cuò)誤信息顯示到指定位置

errorPlacement: function(error, element) {

element = element.parent();

common.showmassage(error, element);

},

success: $.noop,

submitHandler: function(form) {

box.confirm("確定要執(zhí)行【保存】操作？", function (data) {

            if (data) {

$('#updateForm').ajaxPost(dataType.json,submitSuc);

            }

        }, {

            title: '提示信息'

        });

}

};

可以從以上代碼中學(xué)習(xí)到一下知識(shí)點(diǎn)：

js 中操作json對(duì)象，json對(duì)象如下

rules: {

paramName: {

required:true,

maxlength: 25

},

paramValue: {

maxlength: 50

},

paramMemo: {

maxlength: 250

}

}

獲取對(duì)象中的信息可以通過一下的方式

1 for(var item in 對(duì)象名（rules）) 通過循環(huán)可以逐一獲取屬性名（例如：paramName、paramValue、paramMemo）也可以通過rules[item].required方式獲取指定屬性的值。

2 $(":input[name="+item+"]",'#'+form) 在指定form獲取指定name 的input 對(duì)象。

3 給query對(duì)象添加樣式方法.addClass("樣式名稱") 例如：

.inputborder{

   border: #CC0033 1px solid;

}

.addClass("inputborder")。

4 獲取指定form下的input 對(duì)象。$(':input','#'+form);

5 jquery對(duì)象與dom對(duì)象的區(qū)別：var inputs = $(':input','#'+form) inputs是jquery對(duì)象。而 inputs[i].required 中的 inputs[i]就是dom 對(duì)象（即用傳統(tǒng)js方法獲取的對(duì)象）。jquery對(duì)象只能調(diào)用jquery定義的方法，不能調(diào)用dom對(duì)象的方法。同樣dom對(duì)象也只能調(diào)用dom中的方法，不能調(diào)用jquery中的方法。詳情請(qǐng)參考

DOM對(duì)象與jquery對(duì)象有什么不同。