input標簽中和validate中存在required屬性的對應的input輸入框設置為紅色

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

   通用方法代碼：

/**

 * 將頁面中的必填選項輸入框設置為紅色

 * @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對象有什么不同。