目錄

前言

給表單綁定對應(yīng)屬性

在data中定義數(shù)據(jù)對象和表單的定義規(guī)則

與數(shù)據(jù)對象雙向綁定

對整個表單進行驗證

前言

在做項目時，對于表單進行驗證是我們必不可少的

例如

搭建一個基本的登錄界面

<div class="form">
  <h1>登錄</h1>
  <el-card shadow="never" class="login-card">
    <!--登錄表單-->
    <el-form>
      <el-form-item>
        <el-input placeholder="請輸入手機號" />
      </el-form-item>
      <el-form-item>
        <el-input placeholder="請輸入密碼" />
      </el-form-item>
      <el-form-item>
        <el-checkbox>
          用戶平臺使用協(xié)議
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button style="width:350px" type="primary">登錄</el-button>
   </el-form-item>
</el-form>

表單嵌套一般都是

??el-form > el-form-item > el-input?

進行驗證前，我們需要先

給表單綁定對應(yīng)屬性

對<el-form>標簽，我們綁定三個屬性

ref:該屬性是為了能獲取到表單組件

model：表單的數(shù)據(jù)對象

rules：表單的定義規(guī)則

 <el-form ref="form" :model="loginForm" :rules="loginRules"></el-form>

在data中定義數(shù)據(jù)對象和表單的定義規(guī)則

model數(shù)據(jù)對象loginForm:

rules規(guī)則對象loginRules:

如上代碼

對于驗證規(guī)則的制定中

required:true/false(是否必填)

message:提示信息

trigger:通過什么觸發(fā)（一般都是blur，失去焦點時觸發(fā)）

pattern:正則表達式

min：最少位數(shù)

max：最大位數(shù)

對于復(fù)選框的驗證,required是無法進行驗證的，required只能堅持null 和 undefine

對于復(fù)選框的驗證使用

自定義校驗

validator:()=>{}

回調(diào)函數(shù)三個參數(shù)

rule規(guī)則
value檢查的數(shù)據(jù) true/false（是否勾選）
callback 函數(shù) 執(zhí)行這個函數(shù)

代碼

data() {
    return {
      loginForm: {
        phoneNumber: '',
        password: '',
        isAgree: true

      },
      // 校驗規(guī)則
      loginRules: {
        phoneNumber: [{
          required: true,
          message: '請輸入手機號',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手機號格式不正確',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '請輸入密碼',
          trigger: 'blur'
        }, {
          min: 6,
          max: 12,
          message: '密碼應(yīng)在6-12位',
          trigger: 'blur'
        }],
        isAgree: [{
          validator: (rule, value, callback) => {
            value ? callback() : callback(new Error('必須要勾選用戶平臺協(xié)議'))
          }
        }]
      }
    }
  }

與數(shù)據(jù)對象雙向綁定

 <el-form ref="form" :model="loginForm" :rules="loginRules">
      <el-form-item prop="phoneNumber">
            <el-input v-model="loginForm.phoneNumber" placeholder="請輸入手機號" />
      </el-form-item>
      <el-form-item prop="password">
          <el-input v-model="loginForm.password" show-password placeholder="請輸入密碼" />
      </el-form-item>
      <el-form-item prop="isAgree">
          <el-checkbox v-model="loginForm.isAgree">
              用戶平臺使用協(xié)議
          </el-checkbox>
      </el-form-item>
      <el-form-item>
          <el-button style="width:350px" type="primary" @click="login">登錄</el-button>
      </el-form-item>
</el-form>

<el-form-item></el-form-item>

表單驗證，必須填寫prop參數(shù)

使用v-model雙向綁定data中的數(shù)據(jù)對象

對于密碼框

加上

show-password

密碼就不是明文

對整個表單進行驗證

點擊登錄時，需要對整個表單進行驗證

使用

validate

login() {
      this.$refs.form.validate((isOK) => {
        if (isOK) {
          alert('校驗通過')
        }
      })
    }
 

點擊登錄時，調(diào)用該方法對表單進行驗證

完整代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-806945.html

<template>
<div class="form">
      <h1>登錄</h1>
      <el-card shadow="never" class="login-card">
        <!--登錄表單-->
        <el-form ref="form" :model="loginForm" :rules="loginRules">
          <el-form-item prop="phoneNumber">
            <el-input v-model="loginForm.phoneNumber" placeholder="請輸入手機號" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" show-password placeholder="請輸入密碼" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">
              平臺用戶協(xié)議
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 350px;" type="primary" @click="login">
              登錄
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Login',
  data() {
    return {
      isShow: false,
      loginForm: {
        phoneNumber: '',
        password: '',
        isAgree: true

      },
      // 校驗規(guī)則
      loginRules: {
        phoneNumber: [{
          required: true,
          message: '請輸入手機號',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手機號格式不正確',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '請輸入密碼',
          trigger: 'blur'
        }, {
          min: 6,
          max: 12,
          message: '密碼應(yīng)在6-12位',
          trigger: 'blur'
        }],
        isAgree: [{
          validator: (rule, value, callback) => {
            value ? callback() : callback(new Error('必須要勾選用戶平臺協(xié)議'))
          }
        }]
      }
    }
  },
  methods: {
    login() {
      this.$refs.form.validate((isOk) => {
        if (isOk) {
         alert("表單驗證成功")
        }
      })
    }
  }
}
</script>

到了這里，關(guān)于表單驗證 ---- 在Vue2中使用ElementUI進行表單驗證的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！