欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery Validate插件實現表單強大的驗證功能

 更新時間：2015年12月18日 09:48:44   投稿：lijiao  
這篇文章主要介紹了jQuery Validate插件實現表單強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求，感興趣的小伙伴們可以參考一下

jQuery Validate插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。

第一節(jié)：jQuery Validation讓驗證變得如此容易

一、官網下載jquery，和jquery validation plugin
二、引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="js/jquery.validate.js" type="text/javascript"></script>

三、接下來,聲明下面的HTML片段

<form action="" id="jvForm"> 
 姓名:<input type="text" name="username" id="username" class="required" /></br> 
 密碼:<input type="password" name="password" id="password" class="required"/></br> 
 <input type="submit" value="提交" /> 
</form>

通過以上代碼，大家會發(fā)現我們對于每一個input都加上了class="required"
他的作用就是在這個inpute標簽為空時會提示用戶出錯。
四、最后我們要為我們的框架找到一個切入點

<script type="text/javascript"> 
 $(function() { 
  $("#jvForm").validate(); 
 }) 
</script>

運行效果如下

當然提示信息默認是英文的，可根據需要在jquery.validate.js里修改。

第二節(jié)：jQuery Validation讓驗證變得如此容易

上一個例子我們是統(tǒng)一引用jquery.validate.js這樣所有必填字段的提示信息都將是This field is required.
現在要改成動態(tài)提示，比如姓名如果為空則提示姓名不能為空，密碼如果為空則提示密碼不能為空。
這次我們將校驗規(guī)則寫在代碼里
首先還是先引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="js/jquery.validate.js" type="text/javascript"></script>

接下來,聲明下面的HTML片段

<form action="" id="jvForm"> 
 姓名:<input type="text" name="username" id="username" /></br> 
 密碼:<input type="password" name="password" id="password" /></br> 
 <input type="submit" value="提交" /> 
</form>

和之前的相比沒有了class="required"
最后 校驗規(guī)則如下：

$(function() { 
 $("#jvForm").validate({ 
  rules: { 
   username: { 
    required: true 
   }, 
   password: { 
    required: true 
   } 
  }, 
  messages: { 
   username: { 
    required: "姓名不能為空!" 
   }, 
   password: { 
    required: "密碼不能為空!" 
   } 
  } 
 }); 
})

運行效果如下

第三節(jié)：jQuery Validation讓驗證變得如此容易

以下代碼進行對jQuery Validation的簡單演示包括必填項、字符長度，格式驗證
一、引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="js/jquery.validate.js" type="text/javascript"></script>

二、聲明HTML片段

<form action="" id="jvForm"> 
  用 戶 名:<input type="text" name="username"/></br> 
  密 碼:<input type="password" name="password" id="password"/></br> 
  確認密碼:<input type="password" name="confirm_password"/></br> 
  出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option> 
 <option value="1">上海</option><option value="1">深圳</option></select></br> 
  手 機:<input type="text" name="mobile" /></br> 
  郵 箱:<input type="text" name="email" /></br> 
  <input type="submit" value="提交" /> 
</form>

三、錯誤提示樣式

<style type="text/css"> 
 label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;} 
</style>

四、驗證代碼

<script type = "text/javascript"> 
$(function() { 
 $("#jvForm").validate({ 
  rules: { 
   username: { //用戶名必填 至少3位 
    required: true, 
    minlength: 3 
   }, 
   password: { //密碼必填 至少6位 
    required: true, 
    minlength: 6 
   }, 
   confirm_password: { //密碼確認 
    required: true, 
    equalTo: "#password" 
   }, 
   address: { //出生地必填 
    required: true 
   }, 
   mobile: { //手機必填 驗證格式 
    required: true, 
    mobile: true 
   }, 
   email: { //email必填 驗證格式 
    required: true, 
    email: true 
   }, 
 
  }, 
  messages: { 
   username: { 
    required: "用戶名不能為空!", 
    minlength: "用戶名至少三位!" 
   }, 
   password: { 
    required: "密碼不能為空!", 
    minlength: "密碼至少六位!" 
   }, 
   confirm_password: { 
    required: "密碼確認不能為空!", 
    equalTo: "兩次輸入密碼不一致 !" 
   }, 
   address: { 
    required: "請選擇出生地!", 
   }, 
   mobile: { 
    required: "手機不能為空!", 
    mobile: "手機格式不正確", 
   }, 
   email: { 
    required: "郵箱不能為空!", 
    email: "郵箱格式不正確", 
   }, 
  } 
 }); 
}) 
</script>

因為jquery.validate.js中沒有mobile驗證，所以需要自己增加一個
首先找到messages 在里面添加mobile 如下：

messages: { 
 required: "This field is required.", 
 remote: "Please fix this field.", 
 email: "Please enter a valid email address.", 
 url: "Please enter a valid URL.", 
 date: "Please enter a valid date.", 
 dateISO: "Please enter a valid date (ISO).", 
 number: "Please enter a valid number.", 
 mobile: "請?zhí)顚懻_的手機號碼.", 
 digits: "Please enter only digits.", 
 creditcard: "Please enter a valid credit card number.", 
 equalTo: "Please enter the same value again.", 
 maxlength: $.validator.format("Please enter no more than {0} characters."), 
 minlength: $.validator.format("Please enter at least {0} characters."), 
 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), 
 range: $.validator.format("Please enter a value between {0} and {1}."), 
 max: $.validator.format("Please enter a value less than or equal to {0}."), 
 min: $.validator.format("Please enter a value greater than or equal to {0}.") 
}

然后在methods中添加mobile的正則校驗

mobile: function( value, element ) { 
 return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value); 
}

運行效果

以上就是為大家展示的jQuery Validate 插件為表單提供了強大的驗證功能，希望大家喜歡。

相關文章

最新評論