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

創(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)行中。

   通用方法代碼：

       

/**

 * 將頁(yè)面中的必填選項(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è)置必填提示的頁(yè)面加入如下代碼：

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ì)象有什么不同。

文章名稱：input標(biāo)簽中和validate中存在required屬性的對(duì)應(yīng)的input輸入框設(shè)置為紅色
文章源于：http://jinyejixie.com/article20/iisejo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作、電子商務(wù)、企業(yè)網(wǎng)站制作、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)