怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法-創(chuàng)新互聯(lián)

小編給大家分享一下怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專注于中大型企業(yè)的網(wǎng)站設(shè)計(jì)、網(wǎng)站制作和網(wǎng)站改版、網(wǎng)站營(yíng)銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開(kāi)發(fā)的融合，累計(jì)客戶近1000家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對(duì)接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開(kāi)發(fā)，在前進(jìn)的路上，與客戶一起成長(zhǎng)！js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫(xiě)HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

1.下載和引入validate.js

　　首先，我們需要下載一份validate.js文件，這個(gè)文件可以去JQuery官網(wǎng)或者csdn等網(wǎng)站下載。

怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法

下載好之后，新建一個(gè)html文件，然后先后將jquery.js文件和validate.js引入html代碼，我這里新建一個(gè)名為formCheck.html的文件，如下圖所示：

怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法

 這里為了待會(huì)的表單表現(xiàn)的好看一些，我引入了layui.css的樣式文件。

2.建立表單

怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法

 怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法

 3.使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)的驗(yàn)證

 同樣，我們直接看代碼截圖：

怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法

 除了這些檢驗(yàn)方式，validate.js里還封裝了包括郵箱格式驗(yàn)證，電話號(hào)碼格式驗(yàn)證等驗(yàn)證犯法，使用方法和上圖中的number一致，想進(jìn)一步了解的同學(xué)可以自行查看具體的js內(nèi)容哦。上圖中的代碼，rules部分限定了輸入數(shù)據(jù)的規(guī)范，message則設(shè)定了錯(cuò)誤提示信息。

4.查看結(jié)果

怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法


怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法

　　 這種驗(yàn)證方法還是非常簡(jiǎn)單和方便的，借助一個(gè)js插件，輕松搞定數(shù)據(jù)驗(yàn)證，希望這個(gè)簡(jiǎn)單的demo能幫到何我一樣的菜雞哦，先寫(xiě)到這里啦，要睡了，晚安哦！

對(duì)了，差點(diǎn)忘了奉上完整代碼了，請(qǐng)笑納：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>前端表單驗(yàn)證</title>
    <link rel="stylesheet" type="text/css" href="layui-v2.3.0/layui/css/layui.css" rel="external nofollow" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script>
    <style type="text/css">
      #form-box{
        width: 700px;
        height: 300px;
        margin: auto;
        position: relative;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <form action="formCheck.html" method="post">
      <div id="form-box" class="layui-form layui-form-pane">
        <div class="layui-form-item">
          <label class="layui-form-label">用戶名</label>
          <div class="layui-input-inline">
            <input type="text" name="userName" class="layui-input">
          </div>    
         </div>
         <div class="layui-form-item">
          <label class="layui-form-label">密碼</label>
          <div class="layui-input-inline">
            <input type="text" name="passWord" class="layui-input">
          </div>  
         </div>
         <div class="layui-form-item">          
            <input type="submit" name="" id="frmSubmit" value="提交" class="layui-btn layui-btn-primary layui-btn-normal" />
         </div>
      </div>
    </form>
  </body>
  <script type="text/javascript">
    $(function(){
        $("form").validate({
          rules: {
            userName: {
              required: true, //該項(xiàng)表示該字段為必填項(xiàng)
              maxlength: 5 //表示該字段的大長(zhǎng)度為5
            },
            passWord: {
              required: true,
              number: true //表示該字段必須為數(shù)字
            }
          },
          messages: {
            userName: {
              required: "*必填",
              maxlength: "*最多5個(gè)字符"
            },
            passWord: {
              required: "*必填",
              number: "*必須是合法的數(shù)字"
            }
          }          
        })    
      });
  </script>
</html>

以上是“怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：怎么使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://bm7419.com/article12/djhjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、靜態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(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)

成都網(wǎng)頁(yè)設(shè)計(jì)公司