jquery.validate驗(yàn)證text,checkbox,radio,selected

jquery.validate是jquery的一個(gè)插件，用來(lái)輔助開發(fā)者在客戶端方便快捷的實(shí)現(xiàn)表單驗(yàn)證，最終達(dá)到提高用戶體驗(yàn)的目的。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括澄邁網(wǎng)站建設(shè)、澄邁網(wǎng)站制作、澄邁網(wǎng)頁(yè)制作以及澄邁網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，澄邁網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到澄邁省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

官網(wǎng)：

http://plugins.jquery.com/validate/

示例代碼

index.cshtml

<form id="formLogin" method="post">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="password">password:</label>
    <input type="text" id="password" name="password" />
  </div>
  <div>
    <label for="password1">password1:</label>
    <input type="text" id="password1" name="password1" />
  </div>
  <div>
    <label for="sex">sex:</label>
    <select id="sex" name="sex">
      <option id="sexopt" value="" selected="selected">請(qǐng)選擇</option>
      <option id="sexnan" value="1">男</option>
      <option id="sexnv" value="2">女</option>
    </select>
  </div>
  <div>
    <label for="favorite">level:</label>
    <input type="checkbox" id="sport" name="favorite" value="sport" />sport
    <input type="checkbox" id="write" name="favorite" value="write" />write
  </div>
  <div>
    <label for="level">level:</label>
    <input type="radio" id="one" name="level" value="one" />1
    <input type="radio" id="two" name="level" value="two" />2
  </div>
  <div>
    <input  id="submit" type="button" value="submit" />
  </div>
</form>
@section scripts{
<script type="text/javascript" src="/content/home/index.js"></script>
}

jquery.validate在定位html標(biāo)簽的時(shí)候，默認(rèn)使用name屬性來(lái)獲取標(biāo)簽，所以需要開發(fā)者給需要進(jìn)行驗(yàn)證的標(biāo)簽都加上name屬性，并且賦值。

index.js

$().ready(function () {
  $("#formLogin").validate({
    rules: {
      username: {
        required: true
      },
      password: {
        required: true
      },
      sex: {
        required: true
      },
      level: {
        required: true
      },
      favorite: {
        required: true
      }
    },
    messages: {
      username: {
        required: "please input username"
      },
      password: {
        required: "please input password"
      },
      sex: {
        required: "please select sex"
      },
      level: {
        required: "level requred"
      },
      favorite: {
        required: "favorite required"
      }
    },
    errorPlacement: function (error, element) { //指定錯(cuò)誤信息位置
      if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
       var eid = element.attr('name'); //獲取元素的name屬性
       error.appendTo(element.parent()); //將錯(cuò)誤信息添加當(dāng)前元素的父結(jié)點(diǎn)后面
     } else {
       error.insertAfter(element);
     }
   }
 });
});
$("#submit").click(function () {
  $("#submit").submit();
});

有時(shí)候我們需要使用正則表達(dá)式對(duì)一些輸入進(jìn)行驗(yàn)證，比如說(shuō)郵箱，電話號(hào)碼，或者是用戶名必須字母開頭并且長(zhǎng)度要在5-30位，等等之類的。

jquery.validate默認(rèn)沒有提供正則表達(dá)式的驗(yàn)證，但是它提供了一個(gè)擴(kuò)展，我們可以自己添加關(guān)于正則表達(dá)式的驗(yàn)證規(guī)則。

$(function () {
    // 判斷用戶輸入的value是否滿足傳入的正則params的規(guī)范
    jQuery.validator.addMethod("pattern", function (value, element, params) {
                                                                                                                            
        if (!params.test(value)) {
            return false;
        }
        return true;
    });
});

這樣我們就可以像下面這樣使用我們自定義的正則表達(dá)式驗(yàn)證了。

$().ready(function () {
    $("#formLogin").validate({
        rules: {
                                                                                                                    
            tel: {
                required:true,
                pattern: /^[0-9]+$/
            }
        },
        messages: {
                                                                                                                    
            tel: {
                required:'tel required',
                pattern: "regex error"
            }
        }
                                                                                                                
    });
});

怎么樣，是不是很酷?。?/p>

$("#formSupplier").validate還有一些其他的參數(shù)，跟多的參數(shù)可以查看

http://blog.csdn.net/a497785609/article/details/5758613

在這里先介紹兩個(gè)比較常用的。

errorElement

錯(cuò)誤提示的html標(biāo)簽

submitHandler

驗(yàn)證成功之后的操作

$("#formSupplier").validate({
        errorElement: "span",
          
        submitHandler: function (form) {
            if (btnType == 1) {
                  
                submitUpdateSupplier();
            } else {
                offShelf();
            }
        },
        rules: {
            txtSuUserName: {
                required: true,
                pattern: regexUsername
            }
        }，
        messages: {
            txtSuUserName: {
                required: "請(qǐng)?zhí)顚懢幪?hào)！",
                pattern: "請(qǐng)注意，編號(hào)只能使用3-15位的字母組合！"
            }
        }
});

網(wǎng)站名稱：jquery.validate驗(yàn)證text,checkbox,radio,selected
文章出自：http://muchs.cn/article42/pppihc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、網(wǎng)站策劃、網(wǎng)站制作

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)