1. 程式人生 > >Vue element 自定義表單驗證(手機號舉例)

Vue element 自定義表單驗證(手機號舉例)

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="手機號" prop="phone">
            <el-input v-model.number="ruleForm.phone"/>
          </el-form-item>


        </el-form>
export default {
    data() {
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手機號不能為空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('請輸入正確的手機號'));
          }
        }
      };
      return {
        ruleForm: {
          phone: ''
        },
        rules: {
          phone: [
            {validator: checkPhone, trigger: 'blur'}
          ]
        }
      };
    }
}
參考 element 文件

相關推薦

Vue element 定義驗證機號舉例

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">

ant 使用小結定義驗證

1、Search元件新增value變成受控元件,便於數值的清空與獲取。 <Search style={{width:300}} p

資料檢驗外掛: Validate外掛 新增定義驗證

        jQuery.validator.addMethod("ValiPass", function(value, element,params) {         var exp =

easyui常用定義驗證

例如 校驗輸入框只能錄入0-1000之間 最多有2位小數的數字 表單<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox"   validType="rateCheck

Laravel5.5+ 定義驗證語言檔案

在使用 Laravel 的表單驗證時,如果每次都去寫自定義的錯誤資訊是一個很煩人的事,而且有的錯誤資訊可能是重複在寫,比如新增和修改使用者的錯誤資訊基本一致,這是我們就需要一個語言檔案來做這件事,這是 Laravel 所提倡的 DRY( Don't repeat yourself ).

定義驗證--jquery validator addMethod的使用

jQuery.validate是一款非常不錯的表單驗證工具,簡單易上手,而且能達到很好的體驗效果,雖然說在專案中早已用過,但看到這篇文章寫得還是不錯的,轉載下與大家共同分享。 一、用前必備 官方網站:http://bassistance.de/jquery-plugi

easyui jquery 定義驗證 非同步 後臺

後臺程式碼: public String validDatabaseName(){ try { HttpServletRequest request = ServletActionCont

AngularJS 定義驗證$parsers

        當用戶同控制器進行互動,並且ngModelController中的$setViewValue()方法被呼叫時,$parsers陣列中的函式會以流水線的形式被逐個呼叫。第一個$parse被呼叫後,執行結果

iview定義驗證同時驗證 阿星小棧

data () { const validateSectionFileType = (rule, value, callback) => { if (value <= 0) { callback(n

vue + element-ui 的驗證失效問題

首先先描述寫問題   我用的是element-ui 1.4 版本 做的一個後臺管理系統,我在對使用者進行新增的時候有個模態框裡面有表單驗證,在修改使用者資料的時候也有一個表單驗證。當我進來先點選了編輯使用者資料的時候,在點選新增使用者,發現表單驗證失效了。我在每一次關閉的時候

layui 定義驗證的幾個實例

manage ror ida div nbsp ace pla for trim *註:使用本方法請先引入layui依賴的layu.js和layui.css 1.html <input type="text" name="costbudget" lay-

登錄頁面的驗證登錄+密碼

數據 jquer 文件名 kit 存在 -1 ror http java 1.寫項目的過程中避免不了的就是登錄界面。登錄界面需要表單驗證。做個整理,下次使用的時候就更加方便,不用去翻文檔啦!效果圖如下: HTML部分代碼:<!DOCTYPE html><h

js實驗-驗證正則表示式

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <script src="./1.js"></s

JQ---驗證使用者名稱、郵箱

2015-11-30:表單驗證使用者名稱長度、郵箱格式; <!DOCTYPE html> <html> <head> <meta

驗證正則表示式

表單驗證是為了使用者友好提示而設計的,當用戶填寫如身份證、IP、日期、電話等如果輸入錯誤的則會提示。 不多說看程式碼: public static class ValidationStrUtil { //驗證電話號碼 public static bool isTele

vue+element定義校驗特殊字元

本次專案基於vue和element-ui,需要在前端使用者輸入的時候去校驗輸入的內容中是否含有特殊符號,如果有,則提示使用者不支援輸入特殊符號。 校驗規則方法 export function checkSpecificKey(str) { var special

yii2中定義或者post請求 csrf驗證防跨站偽請求

第一種解決辦法是關閉Csrf public function init(){ $this->enableCsrfValidation = false; } 第二種解決辦法是在form表單中加入csrf隱藏域表單。表單名根據我們的cookie設定

Laravel 5.5 FormRequest 定義請求驗證

根目錄 use his extends 數據 不一致 不能 登錄模塊 能夠 1、把表單驗證邏輯寫在Controller中,這是最基礎的方法,但是不好維護,如: 1 namespace App\Http\Controllers\Admin; 2 3 use Illu

vue--定義指令進行驗證1

指令 borde order hone 大於 正則表達 display UNC pen 實例代碼: <template> <div id="app" class="app"> <h3>{{msg}}</h3> &

Element驗證1

首先要掌握Element官方那幾個表單驗證的例子,然後才看下面的教程。 Element主要使用了async-validator這個庫作為表單驗證 async-validator主要分成三部分 Validate Options Rules 其中,對於