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

創(chuàng)新互聯(lián)建站是一家專業(yè)提供蓮池企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為蓮池眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

   通用方法代碼：

/**

 * 將頁面中的必填選項(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

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í)到一下知識點(diǎn)：

js 中操作json對象，json對象如下

rules: {

paramName: {

required:true,

maxlength: 25

},

paramValue: {

maxlength: 50

},

paramMemo: {

maxlength: 250

}

}

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

1 for(var item in 對象名（rules）) 通過循環(huán)可以逐一獲取屬性名（例如：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對象的區(qū)別：var inputs = $(':input','#'+form) inputs是jquery對象。而 inputs[i].required 中的 inputs[i]就是dom 對象（即用傳統(tǒng)js方法獲取的對象）。jquery對象只能調(diào)用jquery定義的方法，不能調(diào)用dom對象的方法。同樣dom對象也只能調(diào)用dom中的方法，不能調(diào)用jquery中的方法。詳情請參考

DOM對象與jquery對象有什么不同。