vue如何實(shí)現(xiàn)表單數(shù)據(jù)驗(yàn)證

這篇文章主要講解了“vue如何實(shí)現(xiàn)表單數(shù)據(jù)驗(yàn)證”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue如何實(shí)現(xiàn)表單數(shù)據(jù)驗(yàn)證”吧！

• 為el-form表單添加：rules

• 在data中定義規(guī)則

• 將定義的規(guī)則綁定在el-form-item

代碼如下：

<!--登錄表單區(qū)域-->
  <el-form :model="loginform" label-width="0px" class="login_form" :rules="loginformrules">
  <!--用戶名-->
   <el-form-item prop="username">
    <el-input v-model="loginform.username" prefix-icon="el-icon-user"></el-input>
  </el-form-item>
  <!--密碼-->
  <el-form-item prop="password">
    <el-input v-model="loginform.password" prefix-icon="el-icon-lock" type="password"></el-input>
  </el-form-item>
  <!--按鈕區(qū)域-->
  <el-form-item class="btns">
    <el-button type="primary">登錄</el-button>
    <el-button type="info">重置</el-button>
  </el-form-item>
  </el-form>
<script>
 export default{
 data(){
  return {
  //登錄表單數(shù)據(jù)綁定對(duì)象
  loginform:{
   username:'',
   password:''
  },
  //表單驗(yàn)證規(guī)則
  loginformrules:{
   //驗(yàn)證用戶名是否合法
   username:[
   { required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' },
   { min: 3, max: 10, message: '長(zhǎng)度在 3 到 10 個(gè)字符', trigger: 'blur' }
   ],
   //驗(yàn)證密碼是否合法
   password:[
   { required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' },
   { min: 6, max: 15, message: '長(zhǎng)度在 6 到 15 個(gè)字符', trigger: 'blur' }
   ]
  }
  }
 }
 }
</script>

ps：下面看下vue 自定義指令input表單的數(shù)據(jù)驗(yàn)證的代碼

一、代碼

<template>
  <div class="check" >
    <h3>{{msg}}</h3>
    <div class="input">
      <input type="text" v-input v-focus><span>{{msg1}}</span>
    </div>
    <div class="input">
      <input type="text" v-input v-required><span>{{msg2}}</span>
    </div>
    <div class="input">
      <!-- required：true/false 表示這個(gè)是必填項(xiàng) -->
      <input type="text" v-input v-checked="{required:true,}"><span>{{msg3}}</span>
    </div>
    <div class="input">
      <!-- <input type="text" v-input v-validate="'required|email|phone|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'">
      required 驗(yàn)證是否是必填項(xiàng)
      email 驗(yàn)證是否是郵箱
      phone 驗(yàn)證是否是電話號(hào)碼
      min(5) 驗(yàn)證最小值
      max(3) 驗(yàn)證最大值
      minlength(6) 驗(yàn)證最小長(zhǎng)度
      maxlength(12) 驗(yàn)證最大長(zhǎng)度
      regex(/^[0-9]*$/) 進(jìn)行正則驗(yàn)證
      -->
      <input type="text" v-input
          v-validate="'required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'" placeholder="多選驗(yàn)證">
    </div>
    <div class="input">
      <!--
      驗(yàn)證必須是數(shù)字：/^[0-9]*$/
      驗(yàn)證由26個(gè)英文字母組成的字符串：/^[a-za-z]+$/
      驗(yàn)證手機(jī)號(hào)： /^[1][3,4,5,7,8][0-9]{9}$/;
      驗(yàn)證郵箱：/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      -->
      <input type="text" v-input v-validate="'required|phone'" placeholder="驗(yàn)證手機(jī)號(hào)碼">
    </div>
    <div class="input">
      <input type="text" v-input v-validate="'required|email'" placeholder="驗(yàn)證郵箱">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'check',
    data() {
      return {
        msg: '指令',
        tipsbordercolor: 'red',
        msg1: '最簡(jiǎn)單的指令',
        msg2: '驗(yàn)證不能為空的指令',
        msg3: '進(jìn)行正則驗(yàn)證',
        tipsmsg: '',
      }
    },

    directives: {
      // 修飾input框的指令
      input: {
        // 當(dāng)被綁定的元素插入到dom上的時(shí)候
        inserted: function (el) {
          el.style.width = "300px";
          el.style.height = "35px";
          el.style.lineheight = "35px";
          el.style.background = "#ddd";
          el.style.fontsize = "16px";
          el.style.border = "1px solid #eee";
          el.style.textindent = "5px";
          el.style.textindent = "8px";
          el.style.borderradius = "5px";
        }
      },
      // input框默認(rèn)選中的指令
      focus: {
        inserted: function (el) {
          el.focus();
        }
      },
      // 不能為空的指令
      required: {
        inserted: function (el) {
          el.addeventlistener('blur', function () {
            if (el.value == '' || el.value == null) {
              el.style.border = "1px solid red";
              console.log('我不能為空');
            }

          })
        }
      },
      // 驗(yàn)證指令
      checked: {
        inserted: function (el) {
          return el
        }
      },
      // 驗(yàn)證
      validate: {
        inserted: function (el, validatestr) {
          // 將驗(yàn)證規(guī)則拆分為驗(yàn)證數(shù)組
          let validaterulearr = validatestr.value.split("|");
          // 監(jiān)聽(tīng)失去焦點(diǎn)的時(shí)候
          el.addeventlistener('blur', function () {
            //失去焦點(diǎn)進(jìn)行驗(yàn)證
            checkedfun();
          });

          // 循環(huán)進(jìn)行驗(yàn)證
          function checkedfun() {
            for (var i = 0; i < validaterulearr.length; ++i) {
              let requiredregex = /^required$/; // 判斷設(shè)置了required
              let emailregex = /^email$/; // 判斷設(shè)置了email
              let phoneregex = /^phone$/; // 判斷設(shè)置了 phone
              let minregex = /min\(/; //判斷設(shè)置了min 最小值
              let maxregex = /max\(/; //判斷設(shè)置了max 最大值
              let minlengthregex = /minlength\(/; //判斷設(shè)置了 minlength 最大長(zhǎng)度
              let maxlengthregex = /maxlength\(/; //判斷設(shè)置了 maxlength 最大長(zhǎng)度
              let regexregex = /regex\(/;
              // 判斷設(shè)置了required
              if (requiredregex.test(validaterulearr[i])) {
                if (!required()) {
                  break;
                } else {
                  removetips();
                }

              }

              // 判斷設(shè)置了email
              if (emailregex.test(validaterulearr[i])) {
                if (!email()) {
                  break;
                } else {
                  removetips();
                }

              }

              // 判斷設(shè)置了 phone
              if (phoneregex.test(validaterulearr[i])) {
                if (!phone()) {
                  break;
                } else {
                  removetips();
                }

              }

              // 判斷是否設(shè)置了最小值
              if (minregex.test(validaterulearr[i])) {
                if (!eval(validaterulearr[i])) {
                  break;
                } else {
                  removetips();
                }

              }

              // 判斷是否設(shè)置了最大值
              if (maxregex.test(validaterulearr[i])) {
                if (!eval(validaterulearr[i])) {
                  break;
                } else {
                  removetips();
                }

              }

              // 判斷設(shè)置了最小長(zhǎng)度
              if (minlengthregex.test(validaterulearr[i])) {
                if (!eval(validaterulearr[i])) {
                  break;
                } else {
                  removetips();
                }

              }

              // 判斷設(shè)置了最大長(zhǎng)度
              if (maxlengthregex.test(validaterulearr[i])) {
                if (!eval(validaterulearr[i])) {
                  break;
                } else {
                  removetips();
                }

              }

              // 判斷測(cè)試正則表達(dá)式
              if (regexregex.test(validaterulearr[i])) {
                if (!eval(validaterulearr[i])) {
                  break;
                } else {
                  removetips();
                }

              }

            }

          }

          // 驗(yàn)證是否是必填項(xiàng)
          function required() {
            if (el.value == '' || el.value == null) {
              // console.log("不能為空");
              tipmsg("不能為空");
              return false;
            }

            return true;
          }

          // 驗(yàn)證是否是郵箱
          function email() {
            let emailrule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            if (!emailrule.test(el.value)) {
              tipmsg("請(qǐng)輸入正確的郵箱地址");
              return false;
            }

            return true;
          }

          // 驗(yàn)證是否是手機(jī)號(hào)碼
          function phone() {
            let phonerule = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!phonerule.test(el.value)) {
              tipmsg("請(qǐng)輸入正確的手機(jī)號(hào)碼");
              return false;
            }

            return true;
          }

          // 最小值驗(yàn)證
          function min(num) {
            if (el.value < num) {
              tipmsg("最小值不能小于" + num);
              //console.log('最小值不能小于'+num);
              return false;
            }

            return true;
          }

          // 最大值驗(yàn)證
          function max(num) {
            if (el.value > num) {
              tipmsg("最大值不能大于" + num);
              //console.log('最大值不能大于'+num);
              return false;
            }

            return true;
          }

          // 最小長(zhǎng)度驗(yàn)證
          function minlength(length) {
            if (el.value.length < length) {
              //console.log('最小長(zhǎng)度不能小于'+length);
              tipmsg("最小長(zhǎng)度不能小于" + length);
              return false;
            }

            return true;
          }

          // 最大長(zhǎng)度進(jìn)行驗(yàn)證
          function maxlength(length) {
            if (el.value.length > length) {
              //console.log('最大長(zhǎng)度不能大于'+length);
              tipmsg("最大長(zhǎng)度不能大于" + length);
              return false;
            }
            return true;
          }

          // 進(jìn)行正則表達(dá)式的驗(yàn)證
          function regex(rules) {
            if (!rules.test(el.value)) {
              tipmsg("請(qǐng)輸入正確的格式");
              return false;
            }
            return true;
          }

          // 添加提示信息
          function tipmsg(msg) {
            removetips();
            let tipsdiv = document.createelement('div');
            let curdate = date.parse(new date());
            tipsdiv.innertext = msg;
            tipsdiv.classname = "tipsdiv";
            tipsdiv.id = curdate;
            tipsdiv.style.position = "absolute";
            tipsdiv.style.top = el.offsettop + 45 + 'px';
            tipsdiv.style.left = el.offsetleft + 'px';
            document.body.appendchild(tipsdiv);
            //settimeout(function(){
            // document.getelementbyid(curdate).remove();
            //},2000);
          }

          // 移除提示信息
          function removetips() {
            if (document.getelementsbyclassname('tipsdiv')[0]) {
              document.getelementsbyclassname('tipsdiv')[0].remove();
            }

          }
        },
      }
    }
  }
</script>

<style>

  .input {
    padding-bottom: 20px;
    float: left;
    clear: both;
    margin-left: 500px;
    display: block;

  }

  .check input {
    width: 300px;
    height: 35px;
    outline: none;
    background: #ddd;
  }

  .check span {
    padding-left: 20px;
  }

  .tipsdiv {
    height: 27px;
    line-height: 25px;
    border: 1px solid #333;
    background: #333;
    padding: 0px 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
  }

  .tipsdiv:before {
    content: '';
    display: block;
    border-width: 0 5px 8px;
    border-style: solid;
    border-color: transparent transparent #000;
    position: absolute;
    top: -9px;
    left: 6px;
  }
</style>

感謝各位的閱讀，以上就是“vue如何實(shí)現(xiàn)表單數(shù)據(jù)驗(yàn)證”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue如何實(shí)現(xiàn)表單數(shù)據(jù)驗(yàn)證這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！